从extjs存储创建checkboxgroup

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

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

但是，我想让它从商店中显示出来。我如何才能做到这一点？

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

您必须手动执行此操作：

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,
    ...
})

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

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

您必须手动执行此操作：

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,
    ...
})

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

这是为您准备的

只需使用方法循环存储数据并设置复选框组项

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

这是给你的

只需使用方法循环存储数据并设置复选框组项

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

---

---

您必须从存储中获取一个值（boxLabel可能只是一个标签…）false:unchecked，true:checked。您使用哪个版本的extjs？摆弄你当前的工作应用程序。然后有人可以修改它以从存储中获取配置。您必须从存储中获取一个值（boxLabel可能只是一个标签…）false:unchecked，true:checked。您使用哪个版本的extjs？摆弄你当前的工作应用程序。然后，有人可以修改它以从商店获取配置。谢谢@Sergey。将项目动态添加到商店后，此操作是否有效。添加到商店后，它将自动显示新复选框。如果需要，请使用@Alexander提到的

.on（）

添加事件侦听器dinamically@coolbuddy，我更新了我的小提琴，现在它是动态的，看看，好的！非常感谢Hanks@Sergey。将项目动态添加到商店后，此操作是否有效。添加到商店后，它将自动显示新复选框。如果需要，请使用@Alexander提到的

.on（）

添加事件侦听器dinamically@coolbuddy，我更新了我的小提琴，现在它是动态的，检查一下，很好！非常感谢Hanks@Alexander.需要知道如何使用checkboxgroup的配置：xtype:'checkboxgroup'，fieldLabel:'Checklist etcI表示复选框将如何显示。很抱歉，我对extjs很陌生。如何以及在何处调用RenderCheckBox函数。请您为其创建一个提琴。因为它可能在将来某个时间对我很方便，我做了一把小提琴：在您使用

Ext.define

定义了

xtype:'storecheckboxgroup'

之后，您可以像使用普通checkboxgroup一样使用它。它还有两个必需的参数，

mapFn

和

store

，但除此之外，您可以使用正常checkboxgroup上的所有参数。谢谢@Alexander。需要知道如何使用checkboxgroup的配置：xtype:'checkboxgroup'，fieldLabel:'Checklist etcI表示复选框将如何显示。很抱歉，我对extjs很陌生。如何以及在何处调用RenderCheckBox函数。请您为其创建一个提琴。因为它可能在将来某个时间对我很方便，我做了一把小提琴：在您使用

Ext.define

定义了

xtype:'storecheckboxgroup'

之后，您可以像使用普通checkboxgroup一样使用它。它还有两个必需的参数，

mapFn

和

store

，但除此之外，您可以使用在普通checkboxgroup上工作的所有参数。