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

   1 /**
   2  * Demonstrates using YQL to fetch data from remote sources (in this case loading from the Sencha blog)
   3  */
   4
   5 Ext.require('Ext.data.JsonP', function() {
   6     Ext.YQL = {
   7         useAllPublicTables: true,
   8         yqlUrl: 'http://query.yahooapis.com/v1/public/yql',
   9         request: function(cfg) {
  10             var p = cfg.params || {};
  11             p.q = cfg.query;
  12             p.format = 'json';
  13             if (this.useAllPublicTables) {
  14                 p.env = 'store://datatables.org/alltableswithkeys';
  15             }
  16
  17             Ext.data.JsonP.request({
  18                 url: this.yqlUrl,
  19                 callbackKey: 'callback',
  20                 params: p,
  21                 callback: cfg.callback,
  22                 scope: cfg.scope || window
  23             });
  24         }
  25     };
  26
  27     Ext.define('KitchenSink.view.YQL', {
  28         extend: 'Ext.Container',
  29         config: {
  30             scrollable: true,
  31             items: [
  32                 {
  33                     xtype: 'panel',
  34                     id   : 'YQL',
  35                     styleHtmlContent: true
  36                 },
  37                 {
  38                     docked: 'top',
  39                     xtype: 'toolbar',
  40                     items: [{
  41                         text: 'Load using YQL',
  42                         handler: function() {
  43                             var panel = Ext.getCmp('YQL'),
  44                                 tpl = new Ext.XTemplate([
  45                                     '<tpl for="item">',
  46                                         '<div class="blog-post">',
  47                                             '<h3><a href="{link}" target="_blank">{title}</a></h3>',
  48                                             '<p>{description}</p>',
  49                                         '</div>',
  50                                     '</tpl>'
  51                                 ]);
  52
  53                             panel.getParent().setMasked({
  54                                 xtype: 'loadmask',
  55                                 message: 'Loading...'
  56                             });
  57
  58                             Ext.YQL.request({
  59                                 query: "select * from rss where url='http://feeds.feedburner.com/sencha' limit 5",
  60                                 callback: function(success, response) {
  61                                     if (success && response.query && response.query.results) {
  62                                         panel.setHtml(tpl.apply(response.query.results));
  63                                     }
  64                                     else {
  65                                         Ext.Msg.alert('Error', 'There was an error retrieving the YQL request.', Ext.emptyFn);
  66                                     }
  67
  68                                     panel.getParent().unmask();
  69                                 }
  70                             });
  71                         }
  72                     }
  73                 ]
  74             }]
  75         }
  76     });
  77 });