extjs/build/examples/classic/component-loader/component-loader.js

   1 Ext.require([
   2     //'Ext.panel.Panel',
   3     //'Ext.form.field.Number'
   4     '*'
   5 ]);
   6
   7 Ext.onReady(function(){
   8     var main = Ext.create('Ext.panel.Panel', {
   9         renderTo: document.body,
  10         width: 800,
  11         height: 400,
  12         bodyPadding: 5,
  13         layout: {
  14             type: 'hbox',
  15             align: 'stretch'
  16         },
  17         defaults: {
  18             border: true
  19         },
  20         items: [{
  21             flex: 1,
  22             margin: '0 2 0 0',
  23             title: 'Load raw html',
  24             bodyPadding: 5,
  25             loader: {
  26                 autoLoad: true,
  27                 url: 'content.html',
  28                 scripts: true
  29             }
  30         }, {
  31             flex: 1,
  32             margin: '0 2 0 3',
  33             title: 'Load data for template',
  34             bodyPadding: 5,
  35             tpl: 'Favorite Colors<br /><br /><tpl for="."><b>{name}</b> - <span style="color: #{hex};">{color}</span><br /></tpl>',
  36             loader: {
  37                 autoLoad: true,
  38                 url: 'data.json',
  39                 renderer: 'data'
  40             }
  41         }, {
  42             flex: 1,
  43             margin: '0 0 0 3',
  44             bodyPadding: 5,
  45             layout: {
  46                 type: 'vbox',
  47                 align: 'stretch'
  48             },
  49             defaults: {
  50                 margin: '0 0 5 0'
  51             },
  52             title: 'Load Dynamic Components - No autoLoad',
  53             itemId: 'dynamic',
  54             dockedItems: [{
  55                 dock: 'bottom',
  56                 xtype: 'toolbar',
  57                 items: [{
  58                     fieldLabel: '# to load',
  59                     labelWidth: 60,
  60                     width: 160,
  61                     xtype: 'numberfield',
  62                     value: 5,
  63                     minValue: 1,
  64                     size: 5,
  65                     itemId: 'toLoad'
  66                 }, {
  67                     text: 'Load!',
  68                     handler: function(){
  69                         var dynamic = main.child('#dynamic'),
  70                             value = dynamic.down('#toLoad').getValue();
  71
  72                         dynamic.getLoader().load({
  73                             params: {
  74                                 total: value
  75                             }
  76                         });
  77                     }
  78                 }]
  79             }],
  80             loader: {
  81                 loadMask: true,
  82                 removeAll: true,
  83                 url: 'boxes.php',
  84                 renderer: 'component',
  85                 success: function(loader){
  86                     var panel = loader.getTarget();
  87                     panel.setTitle('Loaded ' + panel.items.getCount() + ' items');
  88                 }
  89             }
  90         }]
  91     });
  92 });