templates.js
2.34 KB
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
Ext.require('widget.panel');
Ext.onReady(function(){
var data = {
name: 'Abe Elias',
company: 'Sencha Inc',
address: '525 University Ave',
city: 'Palo Alto',
state: 'California',
zip: '44102',
kids: [{
name: 'Solomon',
age:3
},{
name: 'Rebecca',
age:2
},{
name: 'Rebecca 1',
age:0
}]
};
Ext.create('Ext.Panel', {
width: 300,
renderTo: 'template-example',
style: "margin:15px",
bodyStyle: "padding:5px;font-size:11px;",
title: 'Basic Template',
tbar: [{
text: 'Apply Template',
listeners: {
click: function() {
var panel = this.up("panel"),
tpl = Ext.create('Ext.Template',
'<p>Name: {name}</p>',
'<p>Company: {company}</p>',
'<p>Location: {city}, {state}</p>'
);
tpl.overwrite(panel.body, data);
panel.doComponentLayout();
}
}
}],
html: '<p><i>Apply the template to see results here</i></p>'
});
Ext.create('Ext.Panel', {
width: 300,
renderTo: 'xtemplate-example',
style: "margin:15px",
bodyStyle: "padding:5px;font-size:11px;",
title: 'XTemplate',
tbar: [{
text: 'Apply Template',
listeners: {
click: function() {
var panel = this.up('panel'),
tpl =Ext.create('Ext.XTemplate',
'<p>Name: {name}</p>',
'<p>Company: {company}</p>',
'<p>Location: {city}, {state}</p>',
'<p>Kids: ',
'<tpl for="kids" if="age &eq;%eq; \'Abe Elias\'>',
'<tpl if="age > 1"><p>{#}. {parent.name}\'s kid - {name}</p></tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
panel.doComponentLayout();
}
}
}],
html: '<p><i>Apply the template to see results here</i></p>'
});
});