Question

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

问题

为什么复选框显示未定义，如果我通过itemId获取它？
如果我按面板项目获取，为什么不检查复选框。它应该通过直接通过itemid和面板项来获得两种方式。

我在sencha 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小提琴中的要求做了一个（非常）小的例子：https://fiddle.sencha.com/#fiddle/sii

Answer 2

问题是，如果您想要更改复选框的状态，则应使用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来说不是一个好习惯。

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

2 个答案: