Checkbox 列表中的复选框

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

我尝试了以下方法，当然不起作用：

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

{
xtype:'列表'，
高度：“100%”，
itemId:'检查表'，
第三方物流：[
'',
'    ',
“{text}”，
'    ',
'    ',
'    ',
“：”在“，
'    ',
'    ',
'    ',
“：”在“，
'    '
],
商店：“myStore”
},

我通过检查checkbox元素获得了代码引用，但是我假设我必须使它完全不同才能工作

我已经尝试过搜索，但找不到一种方法

另外，如果有一种方法可以禁用复选框，因此它们是只读的，考虑到我不能真正调用复选框的

disable（）

，如果它们被添加到项目模板中，或者我可以吗？

您有两个选项：

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

您必须使用来选择DOM元素并向其中添加行为。要做到这一点，最好使用store

load

方法。如果以后要删除/添加列表项，您也有责任解除绑定处理程序。如果您想使用Sencha Touch无限列表，则此解决方案可能无法实现

2） 使用和。这允许您在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')
});

---

非常感谢，我将研究如何使用数据视图！：）在开发Sencha Touch应用程序2年后，我最终总是选择使用选项1。选项2使您编写了大量代码，而且它不是那么容易理解，我认为您必须努力让它第一次工作。但是你可以尝试两种方法，自己找出哪一种最适合你。我必须选择第二种方法，因为这不是个人工作，所以我必须遵循现有项目的结构，你必须使用它来选择DOM元素并向其中添加行为。要做到这一点，最好使用store

load

方法。如果以后要删除/添加列表项，您也有责任解除绑定处理程序。如果你想使用Sencha Touch infinite列表，这个解决方案可能无法实现。我强烈建议你先使用选项二，当你更熟悉这个框架时，试试选项一。