PDA

View Full Version : [2.0b1][SOLVED] Checkbox.destroy does not fully clear up it's DOM structure



Animal
26 Oct 2007, 5:32 AM
Drop this into examples/form:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="forms.css"/>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css"/>
<script type="text/javascript">
Ext.onReady(function() {
var cb = new Ext.form.Checkbox({
renderTo: Ext.getBody(),
id: 'foo'
});
var wrap = Ext.get('foo').parent().dom;
var wrapId = wrap.id;
alert("Checkbox wrapper element id: " + wrap.id + "\nContinue to destroy Checkbox");
cb.destroy();
wrap = Ext.getDom(wrapId);
if (wrapId) {
alert("Checkbox wrapper not removed!");
}
});
</script>
</head>
<body>
</body>
</html>


I'm creating and destroying fields on load of data because this entity has varying data types, so I have to have a NumberField, TextField, Checkbox or DateField depending on the type.

DateField's destroy clears its wrapper up, but Checkbox.destroy does not, so I get more and more checkbox wrapper elements.

jsakalos
28 Oct 2007, 3:22 PM
Thank you for reporting Animal. We will fix it.

aconran
15 Nov 2007, 4:27 AM
Here is a suggested override:


Ext.form.Checkbox.override({
onDestroy : function(){
if(this.wrap){
this.wrap.remove();
}
Ext.form.Checkbox.superclass.onDestroy.call(this);
}
});


And an updated example, the first checked for an id that would always exist even if the checkbox cleaned itself up.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="forms.css"/>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css"/>
<script>
Ext.form.Checkbox.override({
onDestroy : function(){
if(this.wrap){
this.wrap.remove();
}
Ext.form.Checkbox.superclass.onDestroy.call(this);
}
});
</script>

<script type="text/javascript">
Ext.onReady(function() {
var cb = new Ext.form.Checkbox({
renderTo: Ext.getBody(),
id: 'foo'
});
var wrap = Ext.get('foo').parent().dom;
var wrapId = wrap.id;
alert("Checkbox wrapper element id: " + wrap.id + "\nContinue to destroy Checkbox");
cb.destroy();
wrap = Ext.getDom(wrapId);
if (wrap) {
alert("Checkbox wrapper not removed!");
} else {
alert("Checkbox wrapper was removed.")
}
});
</script>
</head>
<body>

brian.moeskau
15 Nov 2007, 10:39 PM
Fixed in SVN.