Cannot get the value of checkboxgroup in extjs window

Question

I have an ExtJS window that contains checkboxgroups in it and a button to get the selected values.

I have two isseus with it. This is the code:

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

In button handler I want to get the selected items from checkboxes.
I have tried this.getComponent('success').getValue(), Ext.getCmp('failure').getValue(), but firebug keeps saying that they are undefined.

So, How can I get the values on 'Save' click?

Thanks

Answer 1

If you create an id for checkboxgroup, for example,

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

You can do following:

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

Answer 2

Try following:

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

Answer 3

according to: Getting all selected checkboxes in an array , I would suggest something like this:

extend your checkboxgroup with an 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' }
    ]
}]

so that you later can get the selected Items via selector:

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

hopefully, this answer is helping, too!

Answer 4

this should work:

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