javascript - Ext-JS 移除组件陷阱

Question

我有一个像表格行一样的组件，称为 flightLegComponent ，如下所示：

[ flight leg component ] [-] [+]

[ flight leg component] [-] [+]

...

当按下 [-] 按钮时，该组件将被从父面板中删除。

我在 [-] 按钮上添加了一个监听器，在监听器中，我调用

this.remove(theFlightLegComponent);

其中' this '是父组件。

这会引发异常，显然，您不能删除事件处理程序中的组件......删除它的正确方法是什么？延迟后调用方法？

新的：

面板的结构如下：

_flightLegRow: function(removable) {

    var flightLegInput = new xx.yy.zz.search.FlightLegInput({
        columnWidth: .8
    });

    var legId = 'flightLeg-' + this.legs++;

    var c = {

        border: 0,

        width: '90%',

        layout: 'column',

        id: legId,

        items: [

            flightLegInput,

            {
                columnWidth: .2,
                margin: 10,
                border: 0,
                layout: {
                    type: 'column'
                },
                items: [{
                    xtype: 'button',
                    text: '-',
                    disabled: !removable,
                    listeners: {
                        click: Ext.Function.bind(function() {

                            //debugger;
                            this.remove(legId, true);
                        }, this)
                    }
                },{
                    xtype: 'button',
                    text: '+',
                    listeners: {
                        click: Ext.Function.bind(function(){
                            this.add(this._flightLegRow(true));
                        }, this)
                    }
                }]
            }
        ]

    };

    return c;

} 

Answer 1

您可以在需要记住传递正确范围的事件处理程序中删除组件。如果要删除组件，它可能会调用父级 autoDestroy 配置，女巫可能会完全删除它，并可能导致空指针异常。我猜按钮处理程序的函数正在按钮范围内被调用，并且它抛出异常 this.remove 是未定义的。任何代码或异常消息都有助于查明问题。

new Ext.button.Button({
    handler: function(){this.remove......},
    scope: this
})

Answer 2

这是您应该为按钮使用的代码：b.ownerCt 将是 theFlightLegComponent，它的 ownerCt 将是包含 theFlightLegComponent 的面板，这样您就可以删除它。

{
    xtype: 'button',
    text: '-',
    disabled: !removable,
    handler: function(b) {
        b.ownerCt.ownerCt.remove(legId, true);
    }
}