PDA

View Full Version : [CLOSED][Ext 3.1.1] Adding a panel in a TabPanel fails



sergiu079
4 Mar 2010, 1:37 AM
EXT version: 3.1.1

I have the next Tab panel:

var tabPanel = new Ext.TabPanel({
id: 'MainCenterPanel',
region: 'center',
deferredRender: false,
height: 700,
activeTab: 0,
margins: '0 2 0 0',
enableTabScroll: true,
items: [{
title: 'First',
html: 'First'
}]
});


When I try to add a new panel :


var panel = this.add({title:'second',html:'second'});
this.doLayout();
this.setActiveTab(panel);


the second panel is not added, no error received

evant
4 Mar 2010, 2:02 AM
Please post a test case that demonstrates the issue, you can see that this works fine:



Ext.onReady(function(){
var tabs = new Ext.TabPanel({
width: 400,
height: 400,
renderTo: document.body,
activeTab: 0,
items: {
title: 'First',
html: 'First'
}
});

new Ext.Button({
renderTo: document.body,
text: 'Add',
handler: function(){
var newTab = tabs.add({
title: 'Second',
html: 'Second'
});
tabs.doLayout();
tabs.setActiveTab(newTab);
}
});
});

sergiu079
4 Mar 2010, 3:35 AM
It is hard to create a test case in a short-time, the application that I work on is very complex and very large. The main idea is next:
- The main application consist in 2 regions, a west region where I have a navigation panel that contains a tree and a center region that consists in a TabPanel.
- Every time I click on a navigation node, a corresponding panel should be added to the tabPanel( if it is already added, I just activate it).
The application worked fine on all other previous versions from 3.0 below. Now, I want to switch to Ext 3.1.1. version.
Your test works fine, but I don't know yet what's wrong with mine. For example, if I want to add a Portal Panel to this TabPanel, I receive the next error:

Ext.fly(el) is null
http://localhost/ext/ext-all-debug.js
Line 43594

The problem is fired on setActiveTab function:

setActiveTab : function(item){
item = this.getComponent(item);
if(this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
return;
}
if(!this.rendered){
this.activeTab = item;
return;
}
if(this.activeTab != item){
if(this.activeTab){
var oldEl = this.getTabEl(this.activeTab);
if(oldEl){
Ext.fly(oldEl).removeClass('x-tab-strip-active');
}
}
if(item){
var el = this.getTabEl(item);
Ext.fly(el).addClass('x-tab-strip-active');
this.activeTab = item;
this.stack.add(item);

this.layout.setActiveItem(item);
if(this.scrolling){
this.scrollToTab(item, this.animScroll);
}
}
this.fireEvent('tabchange', this, item);
}
},

Doing some debugging I saw that this.getTabEl(item) returns undefined, so I think the problem appears because the portal panel was not really added.
I'll try to give you more details tonight, if I don't fix it by the end of the working day.

sergiu079
4 Mar 2010, 6:18 AM
I found the problem. As I told you before, this application is big :). The Ext.Container add method was overwritten, in order to fix an IE7 issue. I commented this overwritten method and now it works. But I should also test again that IE7 issue.
I guess I'll probably face this problem again during the upgrade. So, this was a false positive, I'm sorry for this, I'll pay more attention next time. Anyway, the other developers should be also aware of this thing because I guess I'm not the only one that uses overwritten methods to fix framework issues.

Thank you again for your help,
Sergiu

evant
4 Mar 2010, 6:51 AM
Alrighty, marking as closed.