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;
}
I have a component acts like a table row, called flightLegComponent like so:
[ flight leg component ] [-] [+]
[ flight leg component] [-] [+]
...
when the [-] button is pressed, that component is meant to be removed from the parent panel.
I have added a listener to the [-] button, and in the listener, i call
this.remove(theFlightLegComponent);
where 'this' is the parent component.
This throws an exception, apparently, you can not remove components inside the event handler... What is the proper way to remove it? invoke a method after a delay?
New:
The panels are structured so:
_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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以删除事件处理程序中需要记住传递正确范围的组件。如果您要删除该组件，它可能会调用父级 autoDestroy 配置，这可能会完全删除它并可能导致空指针异常。我猜测按钮处理程序的函数正在按钮的范围内被调用，并且它抛出异常 this.remove 未定义。任何代码或异常消息都有助于查明问题。
You can remove components in event handlers you need to remember to pass the proper scope. If you are removing the component it may be invoking the parents autoDestroy config witch may delete it entirely and can cause null pointer exceptions. I'm guessing the button handler's function is being called in the scope of the button and it's throwing an exception this.remove is undefined. Any code or exception message would be helpful to pinpoint the problem.
这是您应该用于该按钮的代码：
b.ownerCt 将是theFlightLegComponent，其ownerCt 将是包含theFlightLegComponent 的面板，这样您就可以将其删除。
This is the code you shold be using for the button:
b.ownerCt will be theFlightLegComponent and its ownerCt will the panel that contains theFlightLegComponent, in this way you can remove it.