Select rows Ext.dataview.List based on Store

Question

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 ?

Answer 1

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);
            }
        });
    }
});