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/