Question

我有一个组件就像一个表行，名为flightLegComponent，如下所示：

[ flight leg component ] [-] [+]

[ flight leg component] [-] [+]

...

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

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

this.remove(theFlightLegComponent);

其中'此'是父组件。

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

新：

小组的结构如此：

_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);
    }
}

Ext-JS删除组件陷阱

2 个答案: