在 ExtJS 中单击按钮时不会选中动态创建的复选框

Question

我在 "create checkbox" 按钮上动态（基于条件）创建了一个复选框，并在面板中添加了这个复选框。
根据我的情况，面板中只会添加 1 个复选框，它的项目 ID 将为 "a1"。
当单击另一个按钮时 "checkedcheckbox" 复选框应该被选中，但它没有。当我在单击按钮时通过 itemid 获得此复选框时，它在开发人员工具中显示为未定义。如果我通过面板项目获得它，那么它不会显示未定义但未选中复选框。

问题

如果我通过 itemId 获取它，为什么复选框显示未定义？
如果我按面板项获取，为什么未选中复选框。直接通过itemid和panel items获取应该是双向的。

我在 sencha fiddler 中的帐户存在一些问题，因此我可以为您创建一个 fiddler。

代码

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();
        });

Answer 1

问题是，如果您想更改复选框的状态，您应该使用 setValue(true) 而不是 checked=true。

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

而且，这是获取组件的一种丑陋方式，我通过 down() 及其 itemId

获取它

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

P.D：你应该改进这个选择器，因为使用 id 和 getCmp() 对 ExtJS 来说不是一个好的做法。

Answer 2

我建议学习 .up() .down() .prev()、.next() 和 .query()

的用法

它们是强大的工具，可以在对象结构中的每个组件中导航，而无需处理特殊的项目 ID。您还可以通过 component.query('button[name="mybutton"]')

等配置选项获取组件

我在煎茶中为您的要求做了一个（非常）小的例子fiddle：https://fiddle.sencha.com/#fiddle/sii

在 ExtJS 中单击按钮时不会选中动态创建的复选框

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

javascript

extjs

extjs5