PDA

View Full Version : [FIXED-420][3.1] Bug with FomPanel inside TabPanel



grigory666
25 Dec 2009, 2:13 AM
Ext version tested:

Ext 3.1

Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

Firefox/3.5.6 (firebug 1.4.5 installed)


Operating System:

WinXP Pro


Description:

Bug with FomPanel inside TabPanel (1) (this TabPanel (1) is inside other TabPanel (2) ).
When I close TabPanel (1) occurs an error:
this.dom is undefined return noBoxAdjust[(this.dom.tag... "").toLowerCase()] || Ext.isBorderBox;\next-all-debug.js (string 2813)

There is no such bug in ExtJs v.3.0.1


Test Case:



Ext.onReady(function(){

var InternalTabPanel = new Ext.TabPanel
({
title : 'Internal TabPanel',
closable : true,
activeTab : 0
});

var firstTab = new Ext.FormPanel // I need this form like a tab in internal TabPanel
({
title : 'internal tab 1',
buttons : [{text: 'button'}]
});

InternalTabPanel.add(firstTab);

InternalTabPanel.add
({
title : 'internal tab 2',
});

var ExternalTabPanel = new Ext.TabPanel
({
items : InternalTabPanel,
activeTab : 0
});

new Ext.Window
({
title : 'here is external tab panel',
width : 700,
height : 500,
layout : 'fit',
items : [ExternalTabPanel]

}).show();

});




Steps to reproduce the problem:
Activate by mouse “internal tab2”. Then close “Internal TabPanel”

The result that was expected:
Whole “Internal TabPanel” with all interior tabs should be closed


The result that occurs instead:


“internal tab2” is still opened.

Comes an error: this.dom is undefined return noBoxAdjust[(this.dom.tag... "").toLowerCase()] || Ext.isBorderBox;\next-all-debug.js (string 2813)



Possible fix:


If I use

var firstTab = new Ext.FormPanel
({
title : 'internal tab 1'
});

firstTab.add({
xtype : 'button',
text : 'button'
});

instead of

var firstTab = new Ext.FormPanel
({
title : 'internal tab 1',
buttons : [{text: 'button'}]
});

there is no such bug, but so buttons are not in right place



Or If I use ExtJs v.3.0.1 instead of ExtJs v.3.1 there is no such bug

ckurtz
30 Dec 2009, 4:10 PM
I'm experiencing a similar bug, and it happened today right after I upgraded to Ext 3.1 from Ext 3.0.3

Browser/OS/Firebug
Firefox 3.5.6 / Win XP Pro / Firebug 1.4.5

Summary
Ext window with a card layout. Two cards, each card has a form panel with buttons. "this.dom is undefined" error only occurs when buttons execute the close event on the window AND the second card in the layout has been rendered to the user

Error does not occur if the close window event is executed BEFORE the second card is rendered to the user.

In both cases the window is successfully closed. The problem is the error it throws and the garbage that is built up by not properly destroying the windows children.

Here is some sample code I ran in firebug that produces the error after viewing the second card. The anchor layout is there to mimic the context of my bug. I have another instance of the same bug where the cards are direct children of the window card layout.



new Ext.Window({
height:300,
width:300,
layout: 'anchor',
items: [{
xtype:'container',
height:65,
autoEl: {html: 'hello'}
},{
layout:'card',
height:150,
activeItem:0,
items: [{
xtype: 'form',
items: [{
fieldLabel:'hello',xtype:'textfield'
},{
fieldLabel: 'world',xtype:'textfield'
}],
buttons: [{
text: 'Cancel',
handler: function(){
this.ownerCt.ownerCt.ownerCt.ownerCt.close();
}
},{
text: 'next card',
handler: function(){
this.ownerCt.ownerCt.ownerCt.layout.setActiveItem(1)
}
}]
},{
xtype: 'form',
items: [{
fieldLabel: 'hello2',xtype:'textfield'
},{
fieldLabel: 'world2',xtype:'textfield'
}],
buttons: [{
text: 'Cancel',
handler: function(){
this.ownerCt.ownerCt.ownerCt.ownerCt.close();
}
}]
}]
}]
}).show()

meroy
30 Dec 2009, 10:15 PM
The following works. However, it should work with Ext.FormPanel.

@grigory666



var firstTab = new Ext.Panel // I need this form like a tab in internal TabPanel
({
layout : 'form',
title : 'internal tab 1',
buttons : [{text: 'button'}]
});


@ckurtz



layout: 'form'




layout: 'form'

meroy
30 Dec 2009, 10:46 PM
This override resolves both issues above without causing any memory leaks or additional memory consumption. It restores beforeDestroy from 3.0.3.



Ext.override(Ext.form.FormPanel, {

beforeDestroy : function(){
this.stopMonitoring();
Ext.FormPanel.superclass.beforeDestroy.call(this);
/*
* Clear the items here to prevent them being destroyed again.
* Don't move this behaviour to BasicForm because it can be used
* on it's own.
*/
this.form.items.clear();
Ext.destroy(this.form);
}

});


FYI: That function looks like the following in Ext 3.1 (src/widgets/form/Form.js)



beforeDestroy : function(){
this.stopMonitoring();
/*
* Don't move this behaviour to BasicForm because it can be used
* on it's own.
*/
Ext.destroy(this.form);
this.form.items.clear();
Ext.FormPanel.superclass.beforeDestroy.call(this);
},

jnadler
4 Jan 2010, 3:18 PM
I just found this same bug and I can confirm that meroy's override resolves the issue for me.

papandreou
5 Jan 2010, 2:08 AM
I just found this same bug and I can confirm that meroy's override resolves the issue for me.

Me, too! (ext-3.1.x branch, r5848).

Best regards,
Papandreou

ckurtz
13 Jan 2010, 6:17 PM
Hello meroy,

That override worked great. Thanks for the help! Confirmed fix here too.

meroy
13 Jan 2010, 8:47 PM
Sent Jamie a PM on this. The update isn't in the current trunk.

Jamie Avins
13 Jan 2010, 10:39 PM
You're masking a deeper issue. I'll look into it.

Jamie Avins
14 Jan 2010, 11:44 AM
Dupe of this issue:

http://www.extjs.com/forum/showthread.php?t=89316

Fixed in SVN 5875.