How to get the value of checkbox

Question

How to get the value of a check box?

var tb = new Ext.Toolbar();

tb.add({
                xtype: 'checkbox',
                boxLabel: 'Expand Groups by Default',
                id: 'GetChkBoxValue',
                checked: true,
                handler: function() {
                    alert(this.getValue())
                }
       });

Is it possible to get the value of the checkbox outside tb.I have done something like this but it is not firing

Ext.getCmp('GetChkBoxValue').getValue();

Answer 1

var tb = new Ext.Toolbar();

tb.add({

xtype: 'checkbox',

boxLabel: 'Expand Groups by Default',

id: 'chkid',

checked: true

});

var grid = new Ext.grid.GridPanel({

store: store,

colModel: colModel,

view: gv,

stateId: 'myGridid',

plugins: [filters],

//autoHeight: true,

//height: parseInt(68 + noofrows * 30),

stripeRows: true,

height: 500,

//width: 800,

id: 'my-grid',

title: xppo.st('SDE_PRINTERS'),

tbar: tb,

alert(grid.getTopToolbar().items.itemAt(6).getValue());

alert(grid.topToolbar.items.get('chkid').getValue());

alert(Ext.getCmp('chkid').getValue());

alert(tb.items.get('chkid').getValue());

grid.render('grid-example');

});

It always gives me false. How can i get the value of the checkbox added to toolbar when it is checked and unchecked.

Answer 2

Try out the following code, it should work:

new Ext.Window({
    renderTo: Ext.getBody(),
    width: 500,
    height: 200,
    title: 'test window',
    items: [{
       xtype: 'checkbox',
       boxLabel: 'Expand Groups by Default',
       id: 'chkid',
       checked: true
    }]
}).show()
Ext.getCmp('chkid').getValue()

Then play with the checkbox and with getValue() you get its state (checked or not). Happy ExtJS coding!

Answer 3

here goes the right answer

 var expandAllGroupsCheckbox = Ext.create(

            {
                xtype: 'checkbox',
                boxLabel: 'Expand Groups by Default',
                id: 'chkid',
                checked: true,
                afterRender: function() {
                    Ext.form.Checkbox.superclass.afterRender.call(this);
                    alert(this.getValue());// giving true 
                    this.checkChanged();
                },
                checkChanged: function()
                {
                    var checked = expandAllGroupsCheckbox.getValue();
                    gv.startCollapsed = !checked;
                    if ( gv.mainBody )
                    {
                        gv.toggleAllGroups( !checked );
                    }
                },
                listeners: {
                    check: {
                        fn: function(){expandAllGroupsCheckbox.checkChanged()}
                    }
                }

            });

And then:

tbar: [ expandAllGroupsCheckbox , { xtype: 'tbbutton', icon: '/images/icon_list_props.gif', handler: function() { ShowPreferencesPage(); } } ],