Trying to get a checkbox to listen for a toggle event from a button - extjs4

Question

I'm new to ExtJS and only have minimal javascript skills in general. I'm going through some assignment to learn ExtJS4 but this one is eluding me. I'm trying to get a listeners to check a checkbox (well all of them but just one at the moment) when a toggle button is toggled. No matter how I write the code, I get a similar error from Firebug:
missing : after property id
togglebtn.toggle: function(tog, true){
Any thoughts on what I'm doing wrong and how to correct it?
Thanks...
var togglebtn = Ext.create('Ext.button.Button', {
enableToggle: true
, text: 'Checked'
});
var mychkbxgrp = Ext.create('Ext.form.CheckboxGroup', {
columns: 3
, alias: 'mycheckboxgroup'
, items:[{
boxLabel: 'Item1'
, name: 'rb'
, inputValue: '1'
, listeners:{
togglebtn.toggle: function(tog, true){
setValue: true
}
}
},{
boxLabel: 'Item2', name: 'rb', inputValue: '2'
},{
boxLabel: 'Item3', name: 'rb', inputValue: '3'
}]
});
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body
, width: 600
, height: 40
, items:[{
xtype: 'form'
, height: 30
, width: 180
, bodyPadding: 4
, items:[
mychkbxgrp
]
}
, togglebtn
]
});

Answer 1

AFAIK handlers for events must be functions, and must be defined for this object. You are trying to set toggle handler inside checkbox definition, while it should be on button.
Below is example implementation of that listener
var togglebtn = Ext.create('Ext.button.Button', {
enableToggle: true,
text: 'Checked',
listeners: {
toggle: function(sender, checked){
var container = sender.findParentByType(); // find parent container
var items = container.query('checkboxfield'); // find checkboxes
Ext.each(items, function(i){ // iterate through checkboxes
i.setValue(checked); // check/uncheck
});
}
}
});
And you must remove togglebtn.toggle: function(tog, true){
setValue: true
} from checkbox definition.
Working sample: http://jsfiddle.net/DyctX/