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