Dynamically created check box doesn't get checked on button click in ExtJS

Question

I create a check box dynamically (based on condition) on "create checkbox" button and added this checkbox in panel.
According to my condition, Only 1 checkbox will be added in panel and it's item id will be "a1".
When click on another button "checkedcheckbox" checkbox should be checked but it doesn't. When i get this checkbox by itemid on button click, then it show undefined in developer tools. If i get it by panel items then it doesn't show undefine but checkbox doesn't checked.

PROBLEM

Why checkbox show undefined if i get it by itemId ?
Why Checkbox is not checked if i am getting by panel items. It should be get in both ways by getting directly through itemid and panel items.

There is some problem on my account in sencha fiddler, that's why i can create a fiddler for you.

Code

Ext.onReady(function () {
            var window = new Ext.Window({
                id: 'grdWindow',
                width: 400,
                height: 500,
                title: 'Grid Samples',
                items: [
                    {
                        xtype: 'button',
                        text: 'Create checkbox',
                        handler: function () {

                            var obj1 = [
                                { a: 1},
                                { a: 2},
                                { a: 3},
                                { a: 4}
                            ];

                            var obj2 = [
                                { a: 1 },
                                { a: 5 }
                            ];

                            var i = 1;
                            var panel = Ext.getCmp('pnlTesting');
                            Ext.each(obj1, function (ob1) {
                                Ext.each(obj2, function (ob2) {
                                    if (ob1.a == ob2.a) {
                                        panel.add({
                                            items:[
                                                {
                                                    xtype: 'checkbox',
                                                    itemId: 'a'+i
                                                }
                                                ]
                                        });
                                        return false;
                                    }

                                });
                            });
                        }
                    },
                    {
                        xtype: 'panel',
                        id: 'pnlTesting',
                        height: 100,
                        renderTo: Ext.getBody()
                    },
                    {
                        xtype: 'button',
                        text: 'checkedcheckbox',
                        handler: function () {

                            Ext.getCmp('pnlTesting').items.items[0].items.items[0].checked = true;

                            //Ext.getCmp("a1").checked = true;
                            //Ext.getCmp('pnlTesting').doLayout();
                        }
                    }
                ]
            }).show();
        });

qmateub qmateub · Accepted Answer · 2015-08-20T19:03:37

The problem is that if you want to change the state of the checkbox you should do it with setValue(true) and not checked=true.

{
    xtype: 'button',
    text: 'checkedcheckbox',
    handler: function (btn) {
        Ext.getCmp('pnlTesting').items.items[0].items.items[0].setValue(true);                          
    }
}

And also, that's an ugly way of getting the component, i get it with down() and its itemId

Ext.getCmp('pnlTesting').down('#a1').setValue(true);

P.D: You should improve this selector because using id and getCmp() is not a good practice for ExtJS.

Dynamically created check box doesn't get checked on button click in ExtJS

2 Answers