列表中的复选框

Question

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

我试过以下方法，当然不行：

{
            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'
},

我通过检查复选框元素获得了代码参考，但我假设我必须将其呈现为完全不同的它才能工作。

我试过搜索，但找不到方法。

此外，如果有一种方法可以禁用复选框，那么它们是只读的，考虑到我不能真正为复选框调用 disable()，如果它们被添加到项目模板中或者我可以吗？

Answer 1

您有两个选择：

1) 在模板中使用自定义 html 并直接在 DOM 元素上注册事件。这可以更好地执行并且更可定制，但有一些缺点：

您将不得不使用 http://docs.sencha.com/touch/2.4/2.4.2-apidocs/#!/api/Ext.DomQuery 到 select 您的 DOM 元素并向其添加行为。这样做的一个好处是在 store load 方法上。如果列表项稍后 removed/added，您也有责任解除绑定处理程序。如果您想使用 Sencha Touch 无限列表，则此解决方案可能无法实施。

2) 使用Ext.dataView and 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')
});

列表中的复选框

CheckBox in List

checkbox

sencha-touch-2