无法在extjs窗口中获取checkboxgroup的值

Question

我有一个包含checkboxgroup的ExtJS窗口和一个获取所选值的按钮。

我有两个isseus。这是代码：

Ext.create('widget.window', 
    {
        title  : 'Select which scenario to run',
        draggable: true,
        modal: true,
        header : 
        {
            titlePosition : 2,
            titleAlign    : 'center'
        },
        closable    : true,
        closeAction : 'hide',
        width       : 400,
        height      : 350,
        x           : contentPanel.getX() + 50,
        y           : contentPanel.getY() + 50,
        layout: {
        type: 'hbox',
        align: 'stretch'
        },
        items: 
        [
            {
                xtype: 'panel',
                title: 'If success',
                itemId : 'success',
                autoScroll:true,
                flex: 1,
                items:
                [{
                    xtype: 'checkboxgroup',
                    columns: 1,
                    vertical:true,
                    items: 
                    [
                        { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
                        { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
                        { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                        { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
                        { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
                        { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                        { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
                        { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
                        { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
                    ]
                }]
            },
            {
                xtype: 'panel',
                title: 'If failure',
                id: 'failure',
                autoScroll:true,
                flex: 1,
                items:
                [{
                    xtype: 'checkboxgroup',
                    columns: 1,
                    vertical:true,
                    items: 
                    [
                        { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
                        { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
                        { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                        { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
                        { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
                        { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                        { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
                        { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
                        { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
                    ]
                }]
            }
        ],
        buttons:
        [{
            text    : 'Save',
            itemId  : 'if_save',
            icon    : '../images/save.png',
            ui      : 'default',
            handler : function()
            {
                var cb_f = Ext.getCmp('failure').getValue()
                alert(JSON.stringify(cb_f));
            }
        }]

    }).show(); 

在按钮处理程序中，我想从复选框中获取所选项目。
我尝试了this.getComponent('success').getValue()，Ext.getCmp('failure').getValue()，但是萤火虫一直说它们未定义。

那么，如何才能获得“保存”上的值？

由于

Answer 1

如果您为复选框组创建了ID，例如

xtype: 'checkboxgroup',
id: 'SUCCESS_CHECKBOX_ID',
columns: 1,
vertical:true,
items: 
[
  { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
  { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
  { boxLabel: 'Item 3', name: 'rb', inputValue: '3' }
]

您可以执行以下操作：

handler : function()
{
  var selectedSuccessValues = Ext.getCmp('SUCCESS_CHECKBOX_ID').getChecked();               
  for(var i=0;i<selectedSuccessValues.length;i++)
  {
    alert(selectedSuccessValues[i].inputValue);
  }             
}

Answer 2

根据：Getting all selected checkboxes in an array ，我建议这样的事情：

使用Id：

扩展您的复选框组

[{
    xtype: 'checkboxgroup',
    id: 'myGroup',
    columns: 1,
    vertical: true,
    items:
    [
        { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
        { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
        { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
        { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
        { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
        { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
        { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
        { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
        { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
    ]
}]

以便稍后您可以通过选择器获取所选项目：

buttons:
[{
    text: 'Save',
    itemId: 'if_save',
    icon: '../images/save.png',
    ui: 'default',
    handler: function () {
        var group = Ext.getCmp('myGroup');
        var checkedArray = group.query('[checked="true"]');

        var cb_f = Ext.getCmp('failure').getValue();
        alert(JSON.stringify(cb_f));
    }
}]

希望，这个答案也有帮助！

Answer 3

这应该有效：

listeners: 
{
    change: function(field, newValue, oldValue, eOpts)
    {
       console.log(newValue.rb);
    }
}

Answer 4

请尝试以下操作：

    buttons:
    [{
        text    : 'Save',
        itemId  : 'if_save',
        icon    : '../images/save.png',
        ui      : 'default',
        handler : function()
        {
            var cb_f = Ext.getCmp('failure').getValue()["rb"];
            alert(cb_f);
        }
    }]