src/examples/ajax/app.js

   1 //<debug>
   2 Ext.Loader.setPath({
   3     'Ext': '../../src'
   4 });
   5 //</debug>
   6
   7 /**
   8  * This application demonstrates the simple AJAX abilities of Sencha Touch.
   9  *
  10  * We setup a simple container which has a 2 buttons which will trigger a function to either make
  11  * a AJAX request using Ext.Ajax.request or a JSONP request using Ext.data.JsonP.
  12  */
  13
  14 //the first thing we do is define out application
  15 Ext.application({
  16     startupImage: {
  17         '320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
  18         '640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
  19         '640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
  20         '768x1004': 'resources/startup/768x1004.png', //  Non-retina iPad (first and second generation) in portrait orientation
  21         '748x1024': 'resources/startup/748x1024.png', //  Non-retina iPad (first and second generation) in landscape orientation
  22         '1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
  23         '1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
  24     },
  25
  26     isIconPrecomposed: false,
  27     icon: {
  28         57: 'resources/icons/icon.png',
  29         72: 'resources/icons/icon@72.png',
  30         114: 'resources/icons/icon@2x.png',
  31         144: 'resources/icons/icon@144.png'
  32     },
  33
  34     //requires defines the Components/Classes that our application requires.
  35     requires: [
  36         'Ext.Container',
  37         'Ext.Button',
  38         'Ext.Toolbar',
  39         'Ext.TitleBar',
  40         'Ext.data.JsonP',
  41         'Ext.Ajax',
  42         'Ext.MessageBox',
  43         'Ext.XTemplate'
  44     ],
  45
  46     /**
  47      * The launch method is called when the browser is ready, and the application can launch.
  48      *
  49      * Within this function we create two a new container which will show the content which
  50      * is returned when we make an AJAX request. We also have a toolbar docked to the top which
  51      * has buttons to trigger the AJAX requests. And finally we have a toolbar docked to the bottom
  52      * which shows the status of the current request.
  53      */
  54     launch: function() {
  55         Ext.Viewport.add({
  56             //define each of the items inside this container
  57             layout: 'fit',
  58             items: [
  59                 {
  60                     //we give it an id so we can refrence it below
  61                     id: 'contentView',
  62
  63                     //the content can be scrolled, so set the scrollable config to true
  64                     scrollable: true,
  65
  66                     //we give it a cls so we can custom style it using CSS
  67                     cls: 'x-content',
  68
  69                     //we set the default html to something we the user knows what is happening
  70                     html: 'This example can use either JSONP or AJAX to retrieve data.'
  71
  72                 },
  73                 //this is the top toolbar which will show the two buttons to make a request
  74                 {
  75                     //we give it an xtype of titlebar. titlebar allows you to use 'align' in
  76                     //it's children so we can align them to the left/right. see directly below
  77                     xtype: 'titlebar',
  78
  79                     //we want the bar to be docked at the top
  80                     docked: 'top',
  81
  82                     //and now we define the items we want inside the toolbar
  83                     items: [
  84                         {
  85                             //the text displayed on the button
  86                             text: 'JSONP',
  87
  88                             //next we give this button it's handler, which is a link to the function
  89                             //we want to call when this button is tapped. we also give it a scope so
  90                             //it knows to call this function within the scope of our application
  91                             handler: this.makeJSONPRequest,
  92                             scope: this,
  93
  94                             //align the button to the left
  95                             align: 'left'
  96                         },
  97                         {
  98                             //the text of the button
  99                             text: 'XMLHTTP',
 100
 101                             //once again we give it a link to the function we want to call when we tap
 102                             //the button. this time it calls the Ajax method
 103                             handler: this.makeAjaxRequest,
 104                             scope: this,
 105
 106                             //and then align to the right
 107                             align: 'right'
 108                         }
 109                     ]
 110                 },
 111
 112                 //now we define the bottom toolbar.
 113                 {
 114                     //this time we just use toolbar, as we dont need to align buttons within it
 115                     xtype: 'toolbar',
 116
 117                     //give it an id so we can reference it later
 118                     id: 'statusView',
 119
 120                     //do it to the bottom
 121                     docked: 'bottom',
 122
 123                     //give it it's default title
 124                     title: 'Tap a button above.',
 125
 126                     //and we give it a ui of 'light' (the default is dark) so it looks a little difference
 127                     ui: 'light'
 128                 }
 129             ]
 130         });
 131
 132         //we set application variables so we don't have to keep finding a reference to both the contentView
 133         //and statusView each time we need to update them (below).
 134         //we use Ext.getCmp which allows us to find a component from an id (which we specified above)
 135         this.contentView = Ext.getCmp('contentView');
 136         this.statusView = Ext.getCmp('statusView');
 137     },
 138
 139     /**
 140      * This makes an AJAX request using Ext.Ajax.request. When it completes, it updates the contentView's
 141      * html configuration with the responseText (data from the loaded file).
 142      */
 143     makeAjaxRequest: function() {
 144         //firstly we set local variables of the contentView and statusView. we generallt do this
 145         //only if we are going to use it more than once in our function
 146         var contentView = this.contentView,
 147             statusView = this.statusView;
 148
 149         //next we call the setter of the masked configuration in our contentview. we give it an option
 150         //which tells it to use a Ext.LoadMask which display a loading indicator, and will also display
 151         //the provided message
 152         contentView.setMasked({
 153             xtype: 'loadmask',
 154             message: 'Loading...'
 155         });
 156
 157         //now we create the Ajax request
 158         Ext.Ajax.request({
 159             //first we give it the URL of the request. take not that this can only be local to the web server
 160             //you are on
 161             url: 'test.json',
 162
 163             //then we define a success method, which is called once the ajax request is successful
 164             success: function(response) {
 165                 //the first argument returned is the reponse object, and that object has a property called
 166                 //responseText which is the text of the file we just loaded. so we call setHtml which
 167                 //will update the contentView with the text of the response
 168                 contentView.setHtml(response.responseText);
 169
 170                 //now we set the title of the statusView component to say we loaded the json file
 171                 statusView.setTitle('Static test.json file loaded');
 172
 173                 //and finally we unmask the contentView so the content is viewable
 174                 contentView.unmask();
 175             },
 176             failure: function() {
 177                 contentView.unmask();
 178             }
 179         });
 180     },
 181
 182     /**
 183      * This method makes a JSONP request using Ext.data.JsonP. JSONP is used when you need to make cross-domain
 184      * requests. otherwise you can use AJAX (above).
 185      *
 186      * When the request completes, it will display weather information for the specified location in the
 187      * contentView.
 188      */
 189     makeJSONPRequest: function() {
 190         //once again we set local variables of the contentView and statusView because we need to reference them
 191         //more than once. we also get the XTemplate instance which we will used to display weather information.
 192         var tpl = this.getWeatherTemplate(),
 193             contentView = this.contentView,
 194             statusView = this.statusView;
 195
 196         //first we set the mask of the contentView to show a loading message
 197         contentView.setMasked({
 198             xtype: 'loadmask',
 199             message: 'Loading...'
 200         });
 201
 202         //next we use Ext.data.JsonP to make a request
 203         Ext.data.JsonP.request({
 204             //we give it the url to the free worldweatheronline.com api
 205             url: 'http://api.worldweatheronline.com/free/v1/weather.ashx',
 206
 207             //the callbackKey is used for JSONP requests
 208             callbackKey: 'callback',
 209
 210             //now we define the params to be sent to the server
 211             params: {
 212                 //first it is the API key so we can use the site
 213                 key: 'qfj4gk3t4u5u3bqc8atf69fn',
 214
 215                 //nexgt is the `q` param which is a valid US zipcode (palo alto in this case)
 216                 q: '94301',
 217
 218                 //next we define the format, json
 219                 format: 'json',
 220
 221                 //and finally the number of days we want
 222                 num_of_days: 5
 223             },
 224
 225             //now we define a callback method which is called when the JSONP response is successful.
 226             success: function(result) {
 227                 //the result is a json object which is returned by the API we just requested.
 228                 //in this case all we want is the data.weather property, which is an array
 229                 var weather = result.data.weather;
 230
 231                 //now we check if the weather is actually defined
 232                 if (weather) {
 233                     //if it is defined, we use the setHtml method on contentView to update the html
 234                     //using the tpl.apply method.
 235                     //Ext.XTemplate.apply will bind the data you pass into the xtemplate provided
 236                     //and return a string
 237                     contentView.setHtml(tpl.apply(weather));
 238
 239                     //now we set the title of the status bar
 240                     statusView.setTitle('Weather: Palo Alto, CA');
 241                 } else {
 242                     //if it wasn't defined, we throw an error using Ext.Msg.alert()
 243                     Ext.Msg.alert('Error', 'There was an error retrieving the weather.');
 244                 }
 245
 246                 //and finally unmask the content view
 247                 contentView.unmask();
 248             },
 249             failure: function() {
 250                 Ext.Msg.alert('Error', 'There was an error retrieving the weather.');
 251                 contentView.unmask();
 252             }
 253         });
 254     },
 255
 256     /**
 257      * Returns a Ext.XTemplate instance which will be used to display each weather result when makeJSONPRequest
 258      * is called.
 259      * @return {Ext.XTemplate} The returned template
 260      */
 261     getWeatherTemplate: function() {
 262         return new Ext.XTemplate([
 263             '<tpl for=".">',
 264                 '<div class="day">',
 265                     '<div class="date">{date:date("M d, Y")}</div>',
 266                     '<div class="icon">',
 267                         '<tpl for="weatherIconUrl">',
 268                             '<img src="{value}" />',
 269                         '</tpl>',
 270                     '</div>',
 271                     '<div class="temp">{tempMaxF}&deg;<span class="temp_low">{tempMinF}&deg;</span></div>',
 272                 '</div>',
 273             '</tpl>'
 274         ].join(''));
 275     }
 276 });
 277