Select 行 Ext.dataview.List 基于商店

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"},
    ]
});

在项目中：

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

如何根据商店中的资产索引 'active' select 'List' 中的特定行？

加载时，第一行和第三行应突出显示（selected）

这可以基于 XTemplate 完成吗？

Answer 1

XTemplate 用于自定义显示列表中的一行。对于选择，您需要在循环中的列表中使用 setSelection 方法，该循环获取具有 active=="1" 的所有记录。检查以下代码，也 there is a fiddle here 在工作中显示它：

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

Select 行 Ext.dataview.List 基于商店

Select rows Ext.dataview.List based on Store

extjs

sencha-touch