PDA

View Full Version : Ext js Tabpanel only works for page load need to call it inside a js function to load



sanath_ko
8 Mar 2009, 9:34 PM
This tab panel is only visible @ my page load. I need to load the tab panel when executing a js function.

Tabs.init(); didn't work for me. PLS HELP me on this.


the code is given below.



var Tabs = function() {
var index = 0;
var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true,
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
autoWidth:true,
height:350,
defaults: {autoScroll:true}
});


var init = function (messageId) {
Tabs.addFirstTab();
};

// private function
function addTab(){
alert("Add tab");
tabs.add({
title: 'new mail',
iconCls: 'tabs',
html: 'new tab',
closable:true
}).show();
}

function addFirstTab(){
alert("Add First tab");
tabs.add({
title: 'test',
iconCls: 'tabs',
html: 'first tab',
closable:false,
disabled:true
}).show();
}

return {
// set up which functions should be public
init: init,
addTab: addTab,
addFirstTab : addFirstTab
};

}();
Ext.onReady(Tabs.init, Tabs);

10 Mar 2009, 7:31 AM
yeah, that makes sense to me.

10 Mar 2009, 7:31 AM
What exactly is your problem or are you trying to do??

Animal
10 Mar 2009, 7:33 AM
A TabPanel cannot be rendered with no items.

After addnig a new Panel, call setActiveTab to switch to the new Panel.

10 Mar 2009, 7:35 AM
@Nige, ?? yeah you can . Can you please elaborate?
the following works.


new Ext.TabPanel({
renderTo: Ext.getBody(),
resizeTabs:true,
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
autoWidth:true,
height:350,
defaults: {autoScroll:true}
});

Animal
10 Mar 2009, 7:36 AM
Tried working with that in a layout?

It no work.

The tab strip starts zero height because there are no tab selectors in it.

And when a tab selector gets added, the Panel height does not sync. This has been the cause of several forum threads.

10 Mar 2009, 7:39 AM
my kneejerk reaction is that he's rendering to a div, thus its not part of a layout.

Animal
10 Mar 2009, 7:40 AM
Yes, it should work like that.

He just needs to do a setActiveTab to make the desired new item show.

10 Mar 2009, 7:41 AM
The following works for me:


new Ext.Window({
layout : 'fit',
height : 500,
width : 500,
items : {
xtype : 'tabpanel',
id : 'tp',
layoutOnTabChange : true
}
}).show();



Ext.getCmp('tp').add({
title : 'test',
html : 'some junk'

});

Ext.getCmp('tp').add({
title : 'boij',
html : 'some more junk'
});

Ext.getCmp('tp').doLayout()

10 Mar 2009, 7:42 AM
Please know that i'm not trying to call you out or anything, just want to learn :)

Animal
11 Mar 2009, 12:54 AM
Take a look at the elements in Firebug!

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/tabbug.jpg

The TabPanel's element overflows because the sudden sizing of the tab strip changes its height, but doesn't sync it.