/
TaskList.js
57 lines (55 loc) · 2.14 KB
/
TaskList.js
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
Ext.define('Todo.view.TaskList' , {
store: 'Tasks',
loadMask: false,
itemSelector: 'li',
extend: 'Ext.view.View',
alias : 'widget.taskList',
autoEl: '<ul id="todo-list" />',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<li class="<tpl if="checked">done</tpl> <tpl if="editing">editing</tpl>">',
'<div class="view">',
'<input type="checkbox" <tpl if="checked">checked</tpl> /> ',
'<label>{label}</label>',
'<a class="destroy"></a>',
'</div>',
'<input class="edit" type="text" value="{label}">',
'</li>',
'</tpl>',
{compiled: true}
),
listeners: {
render: function () {
this.el.on('click', function (clickEvent, el) {
var extEl = Ext.get(el)
, parent;
if(extEl.getAttribute('type') === 'checkbox') {
parent = extEl.parent('li');
this.fireEvent('todoChecked', this.getRecord(parent));
}
}, this, {
// TODO I can't get this to delegate using something like div.view input or input[type="checkbox"]
// So this will have a bug with teh input.edit field... I need to figure that out so I don't have to
// do the if logic above.
delegate: 'input'
});
this.el.on('keyup', function (keyEvent, el) {
var extEl = Ext.get(el)
, parent;
if(extEl.getAttribute('type') === 'text') {
parent = extEl.parent('li');
this.fireEvent('onTaskEditKeyup', keyEvent, this.getRecord(parent), extEl);
}
}, this, {
delegate: 'input'
});
this.el.on('click', function (clickEvent, el) {
var extEl = Ext.get(el)
, parent = extEl.parent('li');
this.fireEvent('todoRemoveSelected', this.getRecord(parent));
}, this, {
delegate: 'a'
});
}
}
});