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

Question

1. 我在“创建复选框”按钮上动态创建一个复选框(根据条件)，并将此复选框添加到面板中。

2. 根据我的情况，面板中只会添加 1 个复选框，其项目 ID 为“a1”。

3. 当单击另一个按钮“checkedcheckbox”时，应选中复选框，但事实并非如此。当我通过单击按钮上的 itemid 获取此复选框时，它在开发人员工具中显示未定义。如果我通过面板项获取它，那么它不会显示未定义，但不会选中复选框。

问题

1. 如果我通过 itemId 获取复选框，为什么它显示未定义？
2. 如果我通过面板项目获取，为什么复选框未被选中。它应该通过直接通过 itemid 和面板项来获取。

我的 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

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

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

我为您在 sencha fiddle 中的要求做了一个(非常)小例子:https://fiddle.sencha.com/#fiddle/sii