extjs/examples/kitchensink/modern/src/view/JSONP.js

   1 /**
   2  * Demonstrates how to issue JSON-P request to fetch weather data from a web API
   3  */
   4 Ext.define('KitchenSink.view.JSONP', {
   5     extend: 'Ext.Container',
   6     config: {
   7         scrollable: true,
   8         items: [{
   9                 xtype: 'panel',
  10                 id: 'JSONP'
  11             }, {
  12             docked: 'top',
  13             xtype: 'toolbar',
  14             items: [{
  15                 text: 'Load using JSON-P',
  16                 handler: function() {
  17                     var panel = Ext.getCmp('JSONP'),
  18                         tpl = new Ext.XTemplate([
  19                         '<div class="demo-weather">',
  20                             '<tpl for=".">',
  21                                 '<div class="day">',
  22                                     '<div class="date">{date}</div>',
  23                                     '<tpl for="weatherIconUrl">',
  24                                         '<img src="{value}">',
  25                                     '</tpl>',
  26                                     '<span class="temp">{tempMaxF}&deg;<span class="temp_low">{tempMinF}&deg;</span></span>',
  27                                 '</div>',
  28                             '</tpl>',
  29                         '</div>'
  30                     ]);
  31
  32                     panel.getParent().setMasked({
  33                         xtype: 'loadmask',
  34                         message: 'Loading...'
  35                     });
  36
  37                     Ext.data.JsonP.request({
  38                         url: 'http://api.worldweatheronline.com/free/v1/weather.ashx',
  39                         callbackKey: 'callback',
  40                         params: {
  41                             key: 'qfj4gk3t4u5u3bqc8atf69fn',
  42                             q: '94301', // Palo Alto
  43                             format: 'json',
  44                             num_of_days: 5
  45                         },
  46
  47                         callback: function(success, result) {
  48                             var weather = result.data.weather;
  49
  50                             if (weather) {
  51                                 panel.updateHtml(tpl.applyTemplate(weather));
  52                             }
  53                             else {
  54                                 alert('There was an error retrieving the weather.');
  55                             }
  56
  57                             panel.getParent().unmask();
  58                         }
  59                     });
  60                 }
  61             }]
  62         }]
  63     }
  64 });