Ext-JS删除组件陷阱

Ext-JS remove component gotcha

本文关键字：陷阱 组件 删除 Ext-JS      更新时间：2023-09-26

>我有一个组件就像一个表格行，叫做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;
}

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

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

这是您应该用于按钮的代码：b.ownerCt 将是 FlightLegComponent，其所有者 Ct 将是包含 FlightLegComponent 的面板，这样您就可以将其删除。

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