Question

这个问题可能是微不足道的，但对于我不知道修复它的框架是新的。

我有这个JS代码：

myFormPanel = function() {
// generate items from pre-defined list
var cbItems = [];
for (var i = 0; i < myList.length; i++) {
    var cbItem = {};
    cbItem['boxLabel'] = myList[i];
    cbItems.push(cbItem);
}

myPanel.superclass.constructor.call(this, {
    id: 'my-panel',
    border : false,
    close: 'close',
    autoDestroy : true,
    viewConfig : {
        forceFit : true,
    },
    items: {
        xtype: 'fieldset',
        title: 'Checkbox Group',
        layout: 'form',
        id: "checkbok-group",
        items: [{
            xtype: 'checkboxgroup',
            items: cbItems,
            columns: 3,
            vertical: true,
        },
        new Ext.Button({
            text: 'Send your selected items',
            handler: function() {
                var selectedItems = [];
                // how to get the list of selected items??
                // var items = this.getForm().???();
                // for (var i = 0; i < items.length; i++) {
                //     el = ???;
                //     selectedItems.push(el);
                // }
                Ext.Ajax.request({
                    url: 'foobar/',
                    method: 'POST',
                    jsonData: selectedItems,
                    scope: this,
                });
            },
        }),
        ],
    },
});
};

Ext.extend(MyFormPanel, Ext.FormPanel, {});

我的问题是我不知道如何访问表单中定义的复选框元素列表。 cbItems中的项目不反映表单的当前状态，因为它们仅用于初始化表单，而不会再次更改。

我试过sencha官方文档： http://docs-origin.sencha.com/extjs/3.4.0/#!/api/Ext.form.FormPanel

但看起来我找不到我需要的东西。

请注意，我使用的是extjs 3.4.1，目前无法切换到extjs 4.x.

Answer 1

首先，您应该获得对复选框组的引用，然后您可以使用checkboxGroup.getValue()方法返回仅带有选中复选框的列表，或者使用

checkboxGroup.eachItem(function(checkbox){
    //do something here with the checkbox
})

遍历复选框并随意执行任何操作。

Answer 2

不是特定的extjs，因为我后来意识到导航生成的文档的DOM。

这是我设计的解决方案，使用CSS选择器和Ext.query()方法：

                var selectedValues = [];
                var items = Ext.query("#checkbox-group .x-form-check-wrap");
                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    var input = Ext.query("input", item)[0];
                    if (input.checked) {
                        var label = Ext.query("label", item)[0];
                        selectedValues.push(label.innerHTML);
                    }
                }

从FormPanel获取复选框的列表（extjs 3.4.x）

2 个答案: