javascript – Sencha Touch ExtJS添加复选框列表

2019-06-21 19:21:12 阅读：196 来源： 互联网

标签：javascript mobile extjs sencha-touch

在Sencha Touch 1.0中进行开发.
我正在使用Ext.List来呈现列表,但我还希望每个列表项的开头都以复选框开头.我还想根据数组项值更改其状态,该数组是给配置选项的数组.有没有办法将一个简单的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 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>

并添加了以下监听器：

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,mobile,extjs,sencha-touch
来源： https://codeday.me/bug/20190621/1256793.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Sencha Touch ExtJS添加复选框列表