View Full Version : [UNKNOWN][3.1] TabPanel activate, setActiveTab IE7,8

30 Dec 2009, 1:20 AM

I have a problem after upgrading ExtJs from 3.0 to 3.1 in IE7 and IE 8 (Firefox works properly).

I have a code, which creates new tab in TabPanel and makes it active. It looks working properly when adding one new tab, but when I try to open more tabs in loop it opens only one tab. Code look something like this (I've shortened it, because it's much longer)

for (var i=0; i<selectedProducts.length; i++) {
The problematic function is setActiveTab (or activate - I tried these two functions with every possible manner). When I remove line with setActiveTab it works properly (of course without setting tabs as active). When I tried to add alert() function after setActiveTab it doesn't throw any message so the code must break after setActiveTab function.

In IE 8 I don't get any exception, in IE 7 it's only 'unknown runtime error'.

30 Dec 2009, 1:41 AM
You'll have to post an example, because I tried a simple test and it doesn't have this problem.

var tabs = new Ext.TabPanel({
items: {
itemId: 'tab0',
title: 'First'
new Ext.Viewport({
layout: 'fit',
items: tabs
for(var i = 1; i < 50; i++){
var itemId = 'tab' + i;
itemId: itemId,
title: 'Tab ' + i

30 Dec 2009, 1:53 AM
Ok, so here is the code that adds tabs (it checks if tab of this id is already open. If not it adds new tab):

this.addTab = function(item, tabContentId){
var xtype = (item.xtype ? item.xtype : item.id)+'Tab';
var tab = this.items.find(function(i){return i.id === item.id;});
var xTypeRegistered = Ext.ComponentMgr.isRegistered(xtype);
if (!tab && xTypeRegistered) {
var tabTitle = this.shortenTabName(item.text);
var tabTip = tabTitle<item.text ? item.text : false;
tab = this.add({
id: item.id
,title: tabTitle
,tabTip: tabTip
,closable: true
,xtype: xtype
if (item.tabContentId) {
tab.items.itemAt(0).id = item.tabContentId;
} else if (!xTypeRegistered) {
title: 'Błąd!'
,msg: 'Rozszerzenie typu "' + xtype + '" nie zostało zarejestrowane!'
,buttons: Ext.Msg.OK
,icon: Ext.MessageBox.ERROR

And here is code that adds tabs

var handler = function(b) {
var sm = this.getSelectionModel();
if (!sm.hasSelection()) {
var selectedProducts = sm.getSelections();
for (var i=0; i<selectedProducts.length; i++) {
,text:'Produkt: '+selectedProducts[i].data.name
,tabContentId: 'productForm'+selectedProducts[i].id

30 Dec 2009, 2:01 AM
Why are you using:

var tab = this.items.find(function(i){return i.id === item.id;});
instead of

var tab = this.getComponent(item.id);

ps. I would recommend using itemId instead of id, so you don't have to make sure that your ids are globally unique.