PDA

View Full Version : [OPEN] [CLOSED][3.0.1] I can't destroy() a RadioGroup!



elDub
11 Sep 2009, 12:36 PM
I am having an issue with the DOM after adding a RadioGroup component. It seems that when a RadioGroup is rendered into the DOM I cannot destroy it without encountering an error.

Using the following sample code, you can properly destroy the first inner panel, but trying to destroy the second panel which contains a RadioGroup within it throws an error in Firebug and leaves the panel visible, though without it's contents. Am I doing something wrong here?



var panels = [];

panels.push(new Ext.Panel({
title: "Outer Panel",
autoHeight: true,
width: 312,
items: [{
xtype: "form",
title: 'Without RadioGroup',
autoHeight: true,
width: 300,
frame: true,
cls: 'issue-panel',
defaults: { style: 'padding: 10px 0;' },
items: [
{ html: "This panel will 'destroy' properly." }
],
buttons: [{ text: "destroy panel", handler: function(btn){ btn.ownerCt.ownerCt.destroy(); } }]
},{
xtype: "form",
title: 'With RadioGroup',
autoHeight: true,
width: 300,
frame: true,
cls: 'issue-panel',
defaults: { style: 'padding: 10px 0;' },
items: [
{ html: "A panel with a RadioGroup in it will not 'destroy' properly." },
{
xtype: "radiogroup",
columns: 1,
items: [
{ name: "radioButton", boxLabel: "radioButton1" },
{ name: "radioButton", boxLabel: "radioButton2" }
]
}
],
buttons: [{ text: "destroy panel", handler: function(btn){ btn.ownerCt.ownerCt.destroy(); } }]
}]
}));

Ext.onReady(function(){
Ext.each(panels, function(panel){ panel.render(Ext.getBody());});
});

jsakalos
12 Sep 2009, 1:53 AM
First, you shouldn't call render explicitly, specify renderTo:Ext.getBody() in the toplevel container config instead, and second, you should call remove on a container - it will take care of the rest.

elDub
12 Sep 2009, 5:57 AM
Saki,

The original sample code was as such because it more represents the project as we are using it. We have a dynamically loaded component system in which modules are loaded and removed from the main panels. But, to follow your recommendations, I have re-written the sample code and it still does the exact same thing.



Ext.onReady(function(){
new Ext.Panel({
title: "Outer Panel",
renderTo: Ext.getBody(),
autoHeight: true,
width: 320,
buttons: [
{ text: "remove('withoutRadioGroup')", handler: function(btn){ btn.ownerCt.ownerCt.remove("withoutRadioGroup"); } },
{ text: "remove('withRadioGroup')", handler: function(btn){ btn.ownerCt.ownerCt.remove("withRadioGroup"); } }
],
items: [{
xtype: "form",
title: 'Without RadioGroup',
id: "withoutRadioGroup",
autoHeight: true,
width: 300,
frame: true,
cls: 'issue-panel',
defaults: { style: 'padding: 10px 0;' },
items: [
{ html: "This panel will 'destroy' properly." }
],
},{
xtype: "form",
title: 'With RadioGroup',
id: "withRadioGroup",
autoHeight: true,
width: 300,
frame: true,
cls: 'issue-panel',
defaults: { style: 'padding: 10px 0;' },
items: [
{ html: "A panel with a RadioGroup in it will not 'destroy' properly." },
{
xtype: "radiogroup",
columns: 1,
items: [
{ name: "radioButton", boxLabel: "radioButton1" },
{ name: "radioButton", boxLabel: "radioButton2" }
]
}
]
}]
});
});

Condor
12 Sep 2009, 7:05 AM
I would say it's a bug.

IE does not only not remove the checkboxgroup panel, it even throws a script error.

This happens on both Ext 3.0.1 and the latest Ext 3.0.0+ SVN build, but not in an Ext 3.0+ SVN build.

elDub
5 Oct 2009, 5:29 AM
Condor,

I just applied ExtJS 3.0.2 and my test case above seems to not throw any more errors, so I believe this issue may have been addressed between 3.0.1 and 3.0.2. I wasn't sure what your method of marking the header was (I saw some others with FIXED-###), so I just wanted to let you know that I'm considering it fixed. Thanks.

-Lonnie