examples/component-loader/component-loader.js

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