Get list of checked boxes from a FormPanel (extjs 3.4.x)

Question

this question is probably trivial but being new to the framework I don't know to fix it.

I have this JS code:

myFormPanel = function() {
// generate items from pre-defined list
var cbItems = [];
for (var i = 0; i < myList.length; i++) {
    var cbItem = {};
    cbItem['boxLabel'] = myList[i];
    cbItems.push(cbItem);
}

myPanel.superclass.constructor.call(this, {
    id: 'my-panel',
    border : false,
    close: 'close',
    autoDestroy : true,
    viewConfig : {
        forceFit : true,
    },
    items: {
        xtype: 'fieldset',
        title: 'Checkbox Group',
        layout: 'form',
        id: "checkbok-group",
        items: [{
            xtype: 'checkboxgroup',
            items: cbItems,
            columns: 3,
            vertical: true,
        },
        new Ext.Button({
            text: 'Send your selected items',
            handler: function() {
                var selectedItems = [];
                // how to get the list of selected items??
                // var items = this.getForm().???();
                // for (var i = 0; i < items.length; i++) {
                //     el = ???;
                //     selectedItems.push(el);
                // }
                Ext.Ajax.request({
                    url: 'foobar/',
                    method: 'POST',
                    jsonData: selectedItems,
                    scope: this,
                });
            },
        }),
        ],
    },
});
};

Ext.extend(MyFormPanel, Ext.FormPanel, {});

My problem is that I don't know how to access the list of checkbox elements which are defined in the form. Items in cbItems don't reflect the current status of the form, since they are used only to initialize the form and never changed again.

I tried sencha official docs: http://docs-origin.sencha.com/extjs/3.4.0/#!/api/Ext.form.FormPanel

but looks like I can't find what I need.

Note that I'm using extjs 3.4.1, cannot switch to extjs 4.x at the moment.

Answer 1

Not very extjs specific, as I realized later navigating the DOM of the generated document.

This is the solution I devised, using CSS selectors and the Ext.query() method:

                var selectedValues = [];
                var items = Ext.query("#checkbox-group .x-form-check-wrap");
                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    var input = Ext.query("input", item)[0];
                    if (input.checked) {
                        var label = Ext.query("label", item)[0];
                        selectedValues.push(label.innerHTML);
                    }
                }

Answer 2

First you should get a reference to the checkbox-group, then you can either use the checkboxGroup.getValue() method that returns a list with the checked checkboxes only or use

checkboxGroup.eachItem(function(checkbox){
    //do something here with the checkbox
})

to iterate through the checkboxes and do whatever you want with them.