Javascript Sencha Touch ExtJS将复选框添加到列表

在Sencha Touch 1.0中进行开发。 我正在使用Ext.List呈现列表，但我还希望每个列表项的开头都以复选框开头。我还想根据数组项值更改其状态，该数组被赋予config选项。是否有方法将简单的Ext.form.Checkbox添加到Ext.List

如果我改为在

配置选项中使用

，那么它的显示看起来很难看，其次我不知道如何监听复选框上的事件

以下是你的眼睛糖果的代码：

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]
};  

Ext.regModel（'Todos'{
字段：['title'，'completed_at']
});
变量groupingBase={
itemTpl:“{title}”，
selModel：{
模式：“单一”，
allowDeselect:为真
},
//对,，
indexBar：是的，
无巩膜：{
范围：'测试'，
处理程序：函数（记录、btn、索引）{
警报（'为'+record.get（'title'）披露更多信息）；
}
},
存储：新的Ext.data.store({
模型：“待办事项”，
分拣员：“标题”，
getGroupString:函数（记录）{
返回记录。获取（'title'）[0]；
},
数据：[todos]//todos数组上一次填充了必需项的属性
})
};
myList=新的Ext.List（Ext.apply（groupingBase{
全屏：正确
}));
//列表结束
tasksforbase={
标题：“任务”，
iconCls:“收藏夹”，
cls:“card2”，
正文：“4”，
布局：“适合”，
项目：[
myList{
xtype:“checkboxfield”，
名字：“酷”，
标签：“酷”
}],
dockedItems:[todosNavigationBar]
};  

//tasksforbase然后添加到Ext.TabPanel配置选项中

---

Ext master有什么帮助吗？

我想，我需要使用一个模板 我使用了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>

---

因此，点击列表项时，我会检测是否点击了复选框，并相应地更改相关的div CSS类。我希望同样的事情也适用于收音机。

对于Sencha Touch，图标存储在一种字体中：Pictos。这是角色 例如，这就是我创建复选框按钮的方式（注意：链接缺少回调函数）。只需更改字体颜色以指示是否选中

在Css中：

a {
text-decoration: none;
}
.icon {
 font-family: "Pictos"; 
}

在HTML中：

<span>
  Item #1 
  <a href="#">
  <span class="icon">3</span>
  </a>
 </span>

项目#1

嘿，老兄，我在sencha touch 2.0中遇到了同样的问题，你能给我提供你在sencha touch 2.0中的全部代码吗？如果你这样做会非常有帮助，我会非常感激。提前下载Thanx。如果你能在GitHub中共享它，并尝试在touch 2.1.3的数据视图中实现同样的效果，那就太好了

<span>
  Item #1 
  <a href="#">
  <span class="icon">3</span>
  </a>
 </span>