List中的CheckBox

Question

有没有办法在List的项目模板中添加复选框？

我尝试了以下内容，当然不起作用：

getRange(row,column[,rows])

我通过检查复选框元素获得了代码引用，但我认为我必须将它完全不同才能使其工作。

我试过搜索，但找不到办法做到这一点。

此外，如果有办法禁用复选框，那么它们是只读的，考虑到我无法真正调用{ xtype: 'list', height: '100%', itemId: 'checkList', itemTpl: [ '<div class="line">', ' <div class="label">', ' {text}', ' </div>', ' <input name="checkBox1" class="x-input-el x-input-checkbox" type="checkbox" tabindex="-1" />', ' <div class="x-field-mask">', ' ::after', ' </div>', ' <input name="checkBox2" class="x-input-el x-input-checkbox" type="checkbox" tabindex="-1" />', ' <div class="x-field-mask">', ' ::after', ' </div>' ], store: 'myStore' }, 的复选框，如果它们已添加到项目模板中，或者我可以？

Answer 1

您有两种选择：

1）在模板中使用自定义html并直接在DOM元素上注册事件。这可能表现更好，更可定制，但有一些缺点：

您必须使用http://docs.sencha.com/touch/2.4/2.4.2-apidocs/#!/api/Ext.DomQuery来选择DOM元素并为其添加行为。这样做的好处是在商店load方法上。如果要在以后删除/添加列表项，则还可以解除处理程序的绑定。如果您想使用Sencha Touch无限列表，则无法实现此解决方案。

2）使用Ext.dataView和Ext.dataview.component.DataItem。这允许您在DataView中使用您选择的组件。你应该实现这样的东西：

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! MODEL

Ext.define('TestModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
            name: 'val1'
        }, {
            name: 'val2'
        }, {
            name: 'val3'
        }]
    }
});

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! STORE

Ext.define('TestStore', {
    extend: 'Ext.data.Store',
    config: {
        data: [{
            val1: 'A Button',
            val2: 'with text',
            val3: true
        }, {
            val1: 'The Button',
            val2: 'more text',
            val3: false
        }, {
            val1: 'My Button',
            val2: 'My Text',
            val3: true
        }],
        model: 'TestModel',
        storeId: 'TestStore'
    }
});

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DATA ITEM

Ext.define('MyDataItem', {
    extend: 'Ext.dataview.component.DataItem',
    alias: 'widget.mydataitem',
    config: {
        padding: 10,
        layout: {
            type: 'hbox'
        },
        defaults: {
            margin: 5
        },
        items: [{
            xtype: 'button',
            text: 'Val1'
        }, {
            xtype: 'component',
            flex: 1,
            html: 'val2',
            itemId: 'textCmp'
        }, {
            xtype: 'checkboxfield',
            flex: 1,
            name : 'val3',
            label: 'val3',
            value: 'val3',
            checked: 'val3'
        }]
    },
    updateRecord: function(record) {
        var me = this;

        me.down('button').setText(record.get('val1'));
        me.down('#textCmp').setHtml(record.get('val2'));
        me.down('checkboxfield').setChecked(record.get('val3'));

        me.callParent(arguments);
    }
});

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DATA VIEW

Ext.define('MyDataView', {
    extend: 'Ext.dataview.DataView',
    config: {
        defaultType: 'mydataitem',
        useComponents: true
    }
});

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! RUN

Ext.create('MyDataView', {
    fullscreen: true,
    store: Ext.create('TestStore')
});