Ext-JS删除组件陷阱

问题描述

| 我有一个像表行一样的组件，称为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 config witch可能会完全删除它，并可能导致空指针异常。我猜想在按钮范围内调用了按钮处理程序的功能，并且抛出了this.remove未定义的异常。任何代码或异常消息都将有助于查明问题。

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

    ,这是您为按钮使用的代码： b.ownerCt将是FlightLegComponent，其ownerCt将是包含FlightLegComponent的面板，通过这种方式可以将其删除。

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