CheckBox in List

Question

Is there a way to add checkboxes within the List's Item Template?

I've tried the following, which of course does not work:

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

I got the code reference by inspecting a checkbox element, but I assume that I have to render it completely different for it to work.

I have tried to search, but cannot find a way to do this.

Also if there is a way to disable the checkboxes, so they're read-only, considering I can't really call disable() for the checkboxes, if they're added in the item template or can I?

Answer 1

You have two options:

1) Use custom html in a template and register for events directly on DOM elements. This could perform better and is more customizable but has some downsides:

You will have to use http://docs.sencha.com/touch/2.4/2.4.2-apidocs/#!/api/Ext.DomQuery to select your DOM elements and add behaviour to it. A good point to do that is on the store load method. It will be also your responsibility to unbind handlers if list items are going to be removed/added later. This solution could be impossible to implement if you want to use a Sencha Touch infinite list.

2) Use Ext.dataView and Ext.dataview.component.DataItem. That allows you to use the components of your choice in a DataView. You should implement something like this:

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 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')
});