extjssencha-touch

Select rows Ext.dataview.List based on Store


Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    storeId: 'modules',
    data : [
        {"id":"0", "active": "1", "label": "RST", "name":"строка 1"},
        {"id":"1", "active": "0", "label": "KAS", "name":"строка 2"},
        {"id":"2", "active": "1", "label": "UKR", "name":"строка 3"},
        {"id":"3", "active": "0",  "label": "KJV", "name":"строка 4"},
    ]
});

in items:

{
                        xtype: 'list',
                        store: 'modules',
                        mode: 'MULTI',
                        queryMode: 'local',
                        fullscreen: true,
                        margin: '10 10 10 10',
                        itemTpl: '<div class="contact">{id} <b>{label}</b> {name}</div>'
}

how to select specific rows in a 'List' based on asset index 'active' in Store ?

when loading, the first and third lines should be highlighted (selected)

Can this be done based on XTemplate ?


Solution

  • XTemplate is used for custom display of a row in your list. For the selection you need to use setSelection method on the list in a loop that gets all records with active=="1". Check the following code, also there is a fiddle here showing it in work:

    Ext.application({
        name: 'Fiddle',
        launch: function () {
            let store = Ext.create('Ext.data.Store', {
                fields: ['id', 'name', 'active', 'label'],
                data: [{
                    "id": "0",
                    "active": "1",
                    "label": "RST",
                    "name": "строка 1"
                }, {
                    "id": "1",
                    "active": "0",
                    "label": "KAS",
                    "name": "строка 2"
                }, {
                    "id": "2",
                    "active": "1",
                    "label": "UKR",
                    "name": "строка 3"
                }, {
                    "id": "3",
                    "active": "0",
                    "label": "KJV",
                    "name": "строка 4"
                }, ]
            });
    
            let list = Ext.create({
                xtype: 'list',
                store: store,
                mode: 'MULTI',
                queryMode: 'local',
                fullscreen: true,
                margin: '10 10 10 10',
                itemTpl: '<div class="contact">{id} <b>{label}</b> {name}</div>',
                renderTo: Ext.getBody(),
            });
    
            store.each(function (record, id) {
                if (record.get('active') == "1") {
                    list.setSelection(record);
                }
            });
        }
    });