Sencha Touch Tutorial
Sencha Touch Useful Resources
Selected Reading
- Sencha Touch - Best Practice
- Sencha Touch - Packaging
- Sencha Touch - View Components
- Sencha Touch - Upload & Download
- Sencha Touch - History & Support
- Sencha Touch - Layout
- Sencha Touch - Events
- Environment Detection
- Sencha Touch - Dependencies
- Sencha Touch - Device Profile
- Sencha Touch - Theme
- Sencha Touch - Data
- Sencha Touch - Core Concepts
- Sencha Touch - Migration Steps
- Sencha Touch - Build Application
- Sencha Touch - First App
- Sencha Touch - MVC Explanation
- Sencha Touch - Architecture
- Sencha Touch - Naming Convention
- Sencha Touch - Environment
- Sencha Touch - Overview
- Sencha Touch - Home
Sencha Touch Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Sencha Touch - Upload & Download
Sencha Touch - Upload & Download
Sencha Touch provides XHR2 configuration to work with Ajax and Ajax2 development.
XHR2 is xmlHttpRequest level 2, which used to request data from the server. For any web apppcation, data resides at the server and once the page is loaded, the data should be accessed from the server with the help of Ajax requests.
XHR2 in Sencha Touch provides the progress bar feature, which shows the user the amount of data transferred for a particular request. XHR2 is newly added so we need to check if the browser supports it or not.
Following is the function to check whether the browser supports XHR2 −
if (Ext.feature.has.XHR2) {
// Here we can write functionapty to work if browser supports XHR2
}
We can even check if the progressive upload with XHR2 is supported by the browser or not.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionapty to work if browser supports progressive uploads
}
Various new XHR2 features are included in Sencha Touch.
| Sr.No | Features & Description |
|---|---|
| 1 |
XHR2: true This is used to enable and disable XHR2 functionapty in the apppcation. |
| 2 |
Ext.field.File New file field is added to give more capty about the type of field. |
| 3 |
Ext.field.FileInput This to provide FileInput. |
| 4 |
Ext.progressIndicator This is to provide exact percentage of data transferred in terms of progress bar. |
| 5 |
xtype: fileinput To create instance of fileInput class. |
| 6 |
xtype: filefield To create instance of file class. |
| 7 |
responseType : value This parameter allows various types of responses as text, document, blob etc. |
Following are the examples to send simple ajax request with and without parameter and uploading files using ajax.
Simple Ajax request without parameters - Success
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [ Ext.Panel , Ext.Button , Ext.form.Panel ], onReady: function() {
var request = {
url: https://www.tutorialspoint.com/sencha_touch/index.htm ,
method: POST ,
xhr2: true,
success: function(response) {
Ext.Msg.alert( Ajax call successful );
},
failure: function(response) {
Ext.Msg.alert( Ajax call failed );
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: confirm ,
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
It will produce the following result −
The above example shows the success ajax call as the URL mentioned is correct. In this example, we are not passing any parameter, it’s just a simple ajax request which hits the URL mentioned.
If you are using the chrome browser in the developer tool, navigate to the network section, you can see the request which is being sent and the response which we get.
Simple Ajax request without parameters - Failure
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
Ext.Panel ,
Ext.Button ,
Ext.form.Panel
],
onReady: function() {
var request = {
url: https://www.tutorialspoint.com/sencha_touch/indexx.htm ,
method: POST ,
xhr2: true,
success: function(response) {
Ext.Msg.alert( Ajax call successful );
},
failure: function(response) {
Ext.Msg.alert( Ajax call failed );
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: confirm ,
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
It will produce the following result −
In the above example, just to show how ajax failure works we have mentioned the wrong URL. Compare this and the previous example, you will find the difference.
Sending parameters in Ajax request
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
Ext.Panel ,
Ext.Button ,
Ext.form.Panel
],
onReady: function() {
var formData = new FormData();
formData.append("firstName", "Hi");
formData.append("lastName", "Reader");
// Request will be sent as part of the payload instead of standard post data
var request = {
url: https://www.tutorialspoint.com/sencha_touch/sencha_json.php ,
method: POST ,
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
Ext.Msg.alert(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
Ext.Msg.alert( Ajax failed! );
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: confirm ,
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
It will produce the following result −
In this example, we are passing parameters with the ajax using data property of ajax call.
Uploading files using Ajax
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
Ext.Panel ,
Ext.MessageBox ,
Ext.Button ,
Ext.ProgressIndicator ,
Ext.form.Panel ,
Ext.field.FileInput
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
var request = {
url: https://www.tutorialspoint.com/sencha_touch/sencha_json.php ,
method: POST ,
xhr2: true,
progress:progressIndicator,
success: function(response) {
Ext.Msg.alert( File uploaded successfully. );
},
failure: function(response) {
Ext.Msg.alert( File upload failed. );
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: confirm ,
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
It will produce the following result −
This example shows how to upload data using ajax call. In this example, we are using the progress bar indicator to show the progress while uploading the file.
Advertisements