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

   1 /*
   2  * This panel sets up a DataView, which defines an XTemplate used to render our data. We also set up
   3  * the toolbar with the "Load Nested Data" button here
   4  */
   5 Ext.define('KitchenSink.view.NestedLoading', {
   6     extend: 'Ext.Container',
   7
   8     layout: 'fit',
   9     items: [{
  10         docked: 'top',
  11         xtype: 'toolbar',
  12         items: [{
  13             text: 'Load Nested Data',
  14             handler: function() {
  15                 Ext.getCmp('NestedLoadingDataView').getStore().load();
  16             }
  17         }, {
  18             text: 'Explain',
  19             handler: function() {
  20                 if (!this.explanation) {
  21                     this.explanation = Ext.create('Ext.Panel', {
  22                         modal: true,
  23                         hideOnMaskTap: true,
  24                         centered: true,
  25                         width: Ext.filterPlatform('ie10') ? '100%' : 320,
  26                         height: Ext.filterPlatform('ie10') ? '60%' : 200,
  27                         styleHtmlContent: true,
  28                         scrollable: true,
  29                         items: {
  30                             docked: 'top',
  31                             xtype: 'toolbar',
  32                             title: 'Loading Nested Data'
  33                         },
  34                         html: [
  35                             '<p>The data package can load deeply nested data in a single request. In this example we are loading a fictional',
  36                             'dataset containing Users, their Orders, and each Order\'s OrderItems.</p>',
  37                             '<p>Instead of pulling down each record in turn, we load the full data set in a single request and allow the data',
  38                             'package to automatically parse the nested data.</p>',
  39                             '<p>As one of the more complex examples, it is worth tapping the "Source" button to see how this is set up.</p>'
  40                         ].join("")
  41                     });
  42                     Ext.Viewport.add(this.explanation);
  43                 }
  44                 this.explanation.show();
  45             }
  46         }]
  47     }, {
  48         xtype: 'dataview',
  49         id: 'NestedLoadingDataView',
  50         emptyText: 'No Data Loaded',
  51         styleHtmlContent: true,
  52         /*
  53          * The XTemplate allows us to easily render the data from our User model, as well as
  54          * iterating over each User's Orders and OrderItems:
  55          */
  56         itemTpl: [
  57             '<div class="user">',
  58                 '<h3>{name}\'s orders:</h3>',
  59                 '<tpl for="orders">',
  60                     '<div class="order" style="padding: 0 0 10px 20px;">',
  61                         'Order: {id} ({status})',
  62                         '<ul>',
  63                         '<tpl for="orderItems">',
  64                             '<li>{quantity} x {name}</li>',
  65                         '</tpl>',
  66                         '</ul>',
  67                     '</div>',
  68                 '</tpl>',
  69             '</div>'
  70         ].join(''),
  71         store: {
  72             model: 'User',
  73             autoDestroy: true
  74         }
  75     }]
  76 });