在 Sencha Touch 1.0 中进行开发。
我正在使用 Ext.List 来呈现列表,但我也希望每个列表项的开头都以复选框开头。我还想根据数组项值更改其状态,该数组提供给 config 选项。有没有办法将简单的 Ext.form.Checkbox 添加到 Ext.List。
如果我改为使用 <input type="checkbox".../>
到 <itemTpl>
配置选项,那么它在显示中看起来很难看,其次我不知道如何收听复选框上的事件
这是你的眼睛糖果的代码:
Ext.regModel('Todos', {
fields: ['title', 'completed_at']
});
var groupingBase = {
itemTpl: '<div class="contact2"><strong>{title}</strong></div>',
selModel: {
mode: 'SINGLE',
allowDeselect: true
},
// grouped: true,
indexBar: true,
onItemDisclosure: {
scope: 'test',
handler: function (record, btn, index) {
alert('Disclose more info for ' + record.get('title'));
}
},
store: new Ext.data.Store({
model: 'Todos',
sorters: 'title',
getGroupString: function (record) {
return record.get('title')[0];
},
data: [todos] //todos array is prev populated with required items' properties
})
};
myList = new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));
//List ends
tasksFormBase = {
title: 'Tasks',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4',
layout: 'fit',
items: [
myList, {
xtype: 'checkboxfield',
name: 'cool',
label: 'Cool'
}],
dockedItems: [todosNavigationBar]
};
//tasksFormBase 然后被添加到 Ext.TabPanel 配置选项
任何帮助形成 Ext 大师???
最佳答案
我想通了,我需要使用模板
我使用 List 控件的 itemTpl 属性,tpl 如下所示:
<textarea id="todos-template" class="x-hidden-display">
<div id="todo_item_{todo_id}" class="todo_list">
<input type="checkbox" id="todo_check_{todo_id}" class="todo_checkbox unchecked"/> <strong>{title}</strong>
</div>
</textarea>
并添加了以下监听器:
itemtap: function(dataview, index, item, event) {
var todo = dataview.getStore().getAt(index).data;
if (eve.getTarget('input#todo_check_'+todo.todo_id)) {
Ext.get(item).addCls('selected');
ele = Ext.get('todo_check_'+todo.todo_id);
//reverse condition as the event is fired before the state is set
if(!ele.getAttribute('checked')) {
todo.completed_at = Api.formatDate(new Date());
ele.replaceCls('unchecked', 'checked');
} else {
ele.replaceCls('checked', 'unchecked');
todo.completed_at = null;
}
}
因此,在点击列表项时,我会检测是否点击了复选框并相应地更改了相关的 div CSS 类。我希望同样的事情也适用于广播。
关于javascript - Sencha Touch ExtJS 添加复选框到列表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4270356/