PDA

View Full Version : Processing a checkbox group



michaelc
6 Jan 2012, 2:19 PM
I had this simple bit of 3.x code that no longer works, but I can't see how to fix it.
What it did chcekbox of the checkbox group is "All" if it's checked disable all others, if it's unchecked enable all others.

The Ext.each(checkBoxGroup.items, function(item) is incorrect now.
how do I loop the check boxes now ?


xtype: 'checkboxgroup',
id: 'regionChkGroup',
fieldLabel: 'Region selection',
columns: 3,
items: [{
boxLabel: 'All Regions',
name: 'allRegions',
checked: true,
listeners: {
change: function(checkbox, checked){
checkBoxGroup = Ext.getCmp('regionChkGroup');
if (checked) {
Ext.each(checkBoxGroup.items, function(item){
if (item.name != 'allRegions') {
item.disable(); // turn all othes off
item.setValue(true);
}
}, this);
}
else {
Ext.each(checkBoxGroup.items, function(item){
if (item.name != 'allRegions') {
item.enable(); // enable all other boxes
item.setValue(false);
}
}, this);
}
}
}

mitchellsimoens
6 Jan 2012, 2:38 PM
var cnt = Ext.create('Ext.container.Container', {
renderTo : Ext.getBody(),
width : 400,
height : 400,
layout : 'fit',
items : [
{
xtype : 'checkboxgroup',
fieldLabel : 'Group',
columns : 3,
items : [
{
boxLabel : 'One'
},
{
boxLabel : 'Two'
},
{
boxLabel : 'Three'
}
]
}
]
});

var group = cnt.down('checkboxgroup');

group.items.each(function(item) {
console.log(item);
});

michaelc
6 Jan 2012, 2:56 PM
Kwel - you guys rock.

but one minor question.
use used the following
var group = cnt.down('checkboxgroup');

any real difference in that vs.
var checkBoxGroup = Ext.getCmp('regionChkGroup');

mitchellsimoens
6 Jan 2012, 3:07 PM
down() uses ComponentQuery which is a lot more flexible and robust way of resolving a component. The issue with getCmp and id is that you can get name collisions and last one wins. I always tell people id should only be used for debugging.