PDA

View Full Version : set first tab of scrolling tabpanel active/focused



shahdollie
12 Jan 2011, 2:42 PM
Hi everyone,

I want to set first tab of a tabpanel to be visible/focused when problem loads.

Here is what example:




/*!
* Ext JS Library 3.2.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){

var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
});

// tab generation code
var index = 0;
var tabobj;
while(index < 7){
addTab();
}

tabs.setActiveTab('a1');

function addTab(){
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
id: "a" + index,
html: 'Tab Body ' + (index) + '<br/><br/>'
+ Ext.example.bogusMarkup,
closable:true
}).show();
}

new Ext.Button({
text: 'Add Tab',
handler: addTab,
iconCls:'new-tab'
}).render(document.body, 'tabs');
});




The problem is if i set first tab active, the tabpanel's body show first tab's content but the last is visible (try refreshing 4 to 5 times if u dont get his behaviour - 2 times works fine for me but not after that)

Can anyone suggest some solution for this?
Thanks a lot for help
Regards