Question

我想从数组中填充的商店创建复选框组。这是我的商店。

var checklistStore = new Ext.data.Store({
        data: arraySubT,
        fields: ['id', 'boxLabel']
    });

目前我的复选框组只能从数组中显示而不是存储。

                            xtype: 'checkboxgroup',
                            fieldLabel: 'Checklist',
                            columns: 1,
                            vertical: true,
                            listeners: {
                                change: function(field, newValue, oldValue, eOpts){

                                }
                            },
                            items: checkboxconfigs

但是我想让它从商店中显示出来。我怎么能实现这个目标呢？

Answer 1

[编辑]
为了您和我的方便，我制作了一个可以使用的通用组件。它可能需要对其作出反应的商店事件进行一些调整。在this fiddle中找到它 [/编辑]

你必须手动完成：

renderCheckboxes:function() {
    checkboxgroup.removeAll();
    checkboxgroup.add(
        checklistStore.getRange().map(function(storeItem) {
            return {
               // map the storeItem to a valid checkbox config
            }
        })
    );
}

并在商店数据发生变化时反复重复此操作。也就是说，您必须附加到商店事件：

checklistStore.on({
    load:renderCheckboxes,
    update:renderCheckboxes,
    datachanged:renderCheckboxes,
    filterchange:renderCheckboxes,
    ...
})

也许你会忽略一些必须附加的事件，但迟早你会覆盖所有边缘案例。

Answer 2

以下是working fiddle。

使用Ext.data.Store.each()方法循环浏览商店数据并设置您的复选框组项。

var _checboxGroupUpdated = function() {
    // Use whatever selector you want
    var myCheckboxGroup = Ext.ComponentQuery.query('panel checkboxgroup')[0];

    myCheckboxGroup.removeAll();
    myStore.each(function(record) {
        myCheckboxGroup.add({
            boxLabel: record.get('fieldLabel'),
            inputValue: record.get('value'),
            name: 'myGroup'
        });
    });
}

// Add all listeners you need here
myStore.on({
    load: _checboxGroupUpdated,
    update: _checboxGroupUpdated,
    datachanged: _checboxGroupUpdated
    // etc
});

从extjs商店创建checkboxgroup

2 个答案: