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