This repository was archived by the owner on May 7, 2026. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo5.js
More file actions
122 lines (105 loc) · 3.53 KB
/
Copy pathdemo5.js
File metadata and controls
122 lines (105 loc) · 3.53 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
Ext.onReady(function() {
Ext.define('Example.Component', {
extend: 'Ext.Component',
alias: 'widget.examplecomponent',
styleHtmlContent: true,
renderTpl: [
'<tpl if="compHeader">',
'<h2 id="{id}-compHeader">{compHeader}</h2>',
'</tpl>',
'<tpl if="compList">',
'<ul id="{id}-compList">',
'<tpl for="compList">',
'<li class="list-item">{.}</li>',
'</tpl>',
'</ul>',
'</tpl>'
],
childEls: [
'compHeader',
'compList',
{
name: 'listItems',
select: '.list-item'
}
],
afterRender: function() {
var me = this;
me.callParent(arguments);
me.attachListListeners();
if (me.renderData.compHeader) {
me.attachHeaderEditor();
}
},
attachListListeners: function() {
var me = this;
// Bad Idea - creates 1 DOM event listener per LI
me.mon(me.listItems, 'click', me.onLiClick, me);
// Better Approach
// me.mon(me.getEl(), 'click', me.onLiClick, me, { delegate: '.list-item' });
},
onLiClick: function(event, target) {
console.log('click', event, target);
},
attachHeaderEditor: function() {
var me = this;
me.headerEditor = Ext.create('Ext.Editor',{
updateEl: true,
alignment: 'tl-tl',
field: {
width: 300,
xtype: 'textfield'
}
});
me.mon(me.compHeader, 'dblclick', function() {
me.headerEditor.startEdit(me.compHeader);
});
}
});
Ext.define('Example.Panel',{
extend: 'Ext.panel.Panel',
count: 0,
initComponent: function() {
var me = this;
Ext.apply(me, {
items: [{
xtype: 'examplecomponent',
renderData: {
compHeader: 'Component Header!',
compList: [
'Item 1',
'Item 2',
'Item 3',
'Item 4'
]
}
},{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Update Header',
handler: function() {
me.down('examplecomponent').compHeader.update('Foo: ' + (++me.count));
}
},{
text: 'Toggle Class on List items',
handler: function() {
me.down('examplecomponent').listItems.toggleCls('highlight');
}
},{
text: 'Loop through List Items',
handler: function() {
me.down('examplecomponent').listItems.each(function(li) {
console.log(li.$className, li, li.dom);
});
}
}]
}]
});
me.callParent();
}
});
Ext.create('Example.Panel',{
renderTo: document.body
});
});