PDA

View Full Version : [CLOSED] [4.2.1] TabPanel will not render correctly depending on content creation method



wojteks27
9 Dec 2013, 5:25 AM
ExtJS: 4.2.1.883
OS: OS X 10.9
Browsers: Current Chrome (stable and canary), Safari
Doctype : <!DOCTYPE html>

Code posted below will cause an error on reloading the window titled 'Will behave incorrectly on reopening'.

I have spent some time trying to debug it and came to a conclusion, that the error was caused by the method with which tabpanel's content was created (xtype vs Ext.create).

What I noticed just now is, that if you reopen "bad" window, and after that try to reopen "good" window, the "good" one will break as well (which seems to be only the consequence of the first error, (Chrome does not throw any additional exceptions), but I still considered it worth mentioning).

The error is thrown when trying to add css classess to x-tabpanel-child, but I did not have a clue how to fix it, so I just switched instantiation methods.

If the problem is known, sorry for double posting, I couldn't find an appropriate topic to post this.


<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TabPanel Bug</title>
<script src="http://localhost/ext421/ext-all-debug-w-comments.js"></script>
<link rel="stylesheet" href="http://localhost/ext421/resources/css/ext-all.css">
</head>
<body>
<script type="text/javascript">
Ext.define('Panel1', {
alias: 'widget.panel1',
extend: 'Ext.panel.Panel',
itemId: 'Panel1',
title: 'Panel 1',
layout: 'fit',
items: [
{
xtype: 'textarea',
value: 'Exemplary content for Ext.panel.Panel, item 1'
}
]
});


Ext.define('Panel2', {
alias: 'widget.panel2',
extend: 'Ext.panel.Panel',
itemId: 'Panel2',
title: 'Panel 2',
layout: 'fit',
items : [
{
xtype: 'textarea',
value: 'Exemplary content for Ext.panel.Panel, item 2'
}
]
});


Ext.define('TabPanel1', {
alias: 'widget.tabpanel1',
extend: 'Ext.tab.Panel',
itemId: 'TabPanel',
title: 'TabPanel',
items : [
Ext.create('Panel1'),
Ext.create('Panel2')
]
});

Ext.define('TabPanel2', {
alias: 'widget.tabpanel2',
extend: 'Ext.tab.Panel',
itemId: 'TabPanel',
title: 'TabPanel',
items : [
{xtype:'panel1'},
{xtype:'panel2'}
]
});


Ext.onReady(function () {
Example = {};

Example.createGoodWindow = function(){
var x = Ext.create('Ext.window.Window', {
title: 'Will behave correctly on reopening',
layout: 'fit',
height : 200,
width : 300,
items : [
Ext.create('TabPanel2')
],
dockedItems : [
{
xtype:'button',
dock : 'bottom',
text:'Reopen',
handler: function(){
this.up('window').close();
Example.createGoodWindow();
}
}
],
}).showAt(10,10);
};


Example.createBadWindow = function(){
var x = Ext.create('Ext.window.Window', {
title: 'Will behave incorrectly on reopening',
layout: 'fit',
height : 200,
width : 300,
dockedItems : [
{
xtype:'button',
dock : 'bottom',
text:'Reopen',
handler: function(){
this.up('window').close();
Example.createBadWindow();
}
}
],
items : [
Ext.create('TabPanel1')
]
}).showAt(350,10);
};


Example.createGoodWindow();
Example.createBadWindow();


});
</script>
</body>
</html>

evant
9 Dec 2013, 10:04 AM
This isn't a bug. In TabPanel1, you're explicitly creating class instances and pushing them on to the class definition. Component instances can't be shared across subclasses. This is why declaring them as object configs is the way to go.

wojteks27
9 Dec 2013, 10:15 AM
Hmm, than I must revisit my idea of objects instantiation in ExtJS. Thank you for explaining.