Skip to content

Commit

Permalink
HTML Files
Browse files Browse the repository at this point in the history
  • Loading branch information
@georgehoffer
georgehoffer committed Aug 30, 2013
1 parent a5faac2 commit 01a13d6
Show file tree
Hide file tree
Showing 10 changed files with 1,112 additions and 0 deletions.
91 changes: 91 additions & 0 deletions ajax-document.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!--
Server Side PHP
<?php
header('Access-Control-Allow-Origin: *');
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header('Access-Control-Allow-Headers: origin, X-Requested-With, Authorization, Content-Type');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
exit;
}
echo "<div class='response'>";
echo "Response text is in here";
echo "</div>";
exit;
?>
-->
<!DOCTYPE html>
<html>
<head>
<title>XHR2 - Document Response</title>

<script src="../../../../sencha-touch-debug.js"></script>
<link rel="stylesheet" href="../../../../resources/css/sencha-touch.css">

<style>
.response {
color:#000;
padding:10px;
}
.response:nth-child(even){
color:#333;
background-color: #ddd;
}
</style>

<script type="text/javascript">

Ext.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.form.Panel'
],

onReady: function() {
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/simple-document.php',
method: 'POST',
responseType:"document",
xhr2: true,
success: function(response) {
var dom = response.responseXML,
out = Ext.getCmp("output"),
el = dom.querySelector(".response");
out.innerElement.appendChild(el);
},
failure: function(response) {
console.log(response);
}
};

Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Request",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
87 changes: 87 additions & 0 deletions ajax-formdata.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!--
Server Side PHP
<?php
header('Access-Control-Allow-Origin: *');
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header('Access-Control-Allow-Headers: origin, X-Requested-With, Authorization, Content-Type');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
exit;
}
header('Content-type: application/json');
$response = array(
'success' => true,
'message' => 'Success: ' . $_POST["firstName"] . " " . $_POST["lastName"]
);
echo json_encode($response, true);
?>
-->
<!DOCTYPE html>
<html>
<head>
<title>XHR2 - FormData</title>

<script src="../../../../sencha-touch-debug.js"></script>
<link rel="stylesheet" href="../../../../resources/css/sencha-touch.css">

<script type="text/javascript">

Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],

onReady: function() {
var formData = new FormData();
formData.append("firstName", "John");
formData.append("lastName", "Doe");

// Request will be sent as part of the payload instead of standard post data
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/post-json.php',
method: 'POST',
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
out.setHtml(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};

Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
100 changes: 100 additions & 0 deletions ajax-image.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!--
Server Side PHP
<?php
header('Access-Control-Allow-Origin: *');
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header('Access-Control-Allow-Headers: origin, X-Requested-With, Authorization, Content-Type');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
exit;
}
header("Content-Type: image/png");
$path = "./sencha-logo.png";
$fp = fopen($path, 'rb');
header("Content-Length: " . filesize($path));
fpassthru($fp);
?>
-->
<!DOCTYPE html>
<html>
<head>
<title>XHR2 - Simple Image Loader</title>

<script src="../../../../sencha-touch-debug.js"></script>
<link rel="stylesheet" href="../../../../resources/css/sencha-touch.css">

<script type="text/javascript">

Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],

onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator");

var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/simple-image.php',
responseType:"blob",
method: 'POST',
progress: progressIndicator,
xhr2: true,
success: function(response) {
var createObjectURL = window.URL && window.URL.createObjectURL ? window.URL.createObjectURL : webkitURL && webkitURL.createObjectURL ? webkitURL.createObjectURL : null;
if (createObjectURL) {
var image = Ext.Viewport.down("image");
var url = createObjectURL(response.responseBytes);
image.setSrc(url);
}
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};

Ext.Viewport.add({
xtype:"panel",
layout:{
type: "vbox",
pack: "center",
align: "center"
},
fullscreen:true,
items: [
{
xtype:"image",
height: 400,
width: 250,
style: {
"background-position": "0 0"
},
src: 'http://placehold.it/250x400'
},
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
86 changes: 86 additions & 0 deletions ajax-params.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!--
Server Side PHP
<?php
header('Access-Control-Allow-Origin: *');
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header('Access-Control-Allow-Headers: origin, X-Requested-With, Authorization, Content-Type');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
exit;
}
header('Content-type: application/json');
$response = array(
'success' => true,
'message' => 'Success: ' . $_POST["firstName"] . " " . $_POST["lastName"]
);
echo json_encode($response, true);
?>
-->
<!DOCTYPE html>
<html>
<head>
<title>XHR2 - Params</title>

<script src="../../../../sencha-touch-debug.js"></script>
<link rel="stylesheet" href="../../../../resources/css/sencha-touch.css">

<script type="text/javascript">

Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],

// Request will be sent as standard post data
onReady: function() {
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/post-json.php',
method: 'POST',
xhr2: true,
params: {
firstName: "John",
lastName: "Doe"
},
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
out.setHtml(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};

Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Loading

0 comments on commit 01a13d6

Please sign in to comment.