javascript - 添加了复选框，找不到 ('checkboxgroup' )

Question

我有一个如下定义的复选框组。 (复选框组在 Controller 中定义了一个“更改”事件，我希望这在这里无关紧要。)

处理程序显示以下问题:

• 当尝试访问 startItems 复选框的 checkbox.up('checkboxgroup') 时，它们会获取 checkboxgroup。
• 当尝试访问 checkbox.up('checkboxgroup') 来添加复选框时，它们会出现未定义。

我做错了什么，或者我怎样才能得到正确的引用文献？

Ext.define('MyApp.CheckItems', {
extend : 'Ext.form.CheckboxGroup',
defaults : {
    margin : "0 10 0 0"
},
...
handleUncheckOne:function(checkbox,checked) {
    console.log(checkbox.up('checkboxgroup'));
    // Output depends on whether it is a startItems checkbox one or a new one...
},
initComponent : function() {
    var list = [{
                xtype:'checkbox',
                boxLabel: "All", 
                name: "#ALL#", 
                inputValue: "#ALL#",
                checked :  false,
                handler: me.handleCheckAll
            }];
    Ext.each(startItems, function(entry, i) {
        list.push( {
            boxLabel : entry.label,
            name : entry.name,
            inputValue : entry.value,
            checked : true,
            handler : me.handleUncheckOne
        });
    });

    Ext.applyIf(me, {
        items : list
    });
    me.callParent(arguments);
},
addToList:function(names) {
    var me = this;
    var list = [];
    Ext.each(names,function(entry) {
        list.push(Ext.create('Ext.form.field.Checkbox',Ext.applyIf(Ext.clone(me.defaults),{
            boxLabel : entry.label,
            name : entry.name,
            inputValue : entry.value,
            checked : true,
            handler : me.handleUncheckOne,
            listeners : {
                change: function() {
                    me.fireEvent("change") // Fire change event on checkboxgroup
                }
            }
        })));
    });
    if(list.length>0) {
        me.items.addAll(list);
        me.doLayout();
    }
}

Answer 1

您不能像这样直接修改项目集合。这样做，您可以绕过一些会设置新复选框的 ownerCt 属性的代码，这解释了 up 查询不起作用的原因。

您的代码应该如下所示:

addToList: function(names) {
    var me = this; // hope this it the checkbox group
    var list = [];
    Ext.each(names, function(entry) {
        // adding with the container's add method
        me.add(new Ext.form.field.Checkbox(Ext.applyIf({
            boxLabel : entry.label,
            name : entry.name,
            inputValue : entry.value,
            checked : true,
            handler : me.handleUncheckOne,
            listeners : {
                change: function() {
                    me.fireEvent("change") // Fire change event on checkboxgroup
                }
            }
        }, me.defaults)));
    });
}