PDA

View Full Version : Tab not getting creating



murkrishna
26 May 2010, 12:31 AM
Hi,

The project i was working in was created using the layout-browser layout.

I have modified the script as i have created
North, west and center panel.

North - Title panel
West - Tree Panel
Center - Tab panel

Based on the menu from tree panel click the respective page will be opened.

I tried to convert the same in Object oriented.
Layout was created and tree nodes are loaded.

But loading in tabpanel (Creating new tab for each menu option) was not working properly

treepanel Code




Example.Tree = Ext.extend(Ext.tree.TreePanel, {

initComponent: function() {
// component configuration code here!
this.rootID = this.rootID ? this.rootID : Ext.id();
Ext.apply(this, {
// default config params here
border:false,
id: 'tree-panel',
title: 'Menu',
split: true,
width : 250,
margins: '5 0 0 5',
autoScroll: true,

// tree-specific configs:
rootVisible: false,
lines: true,
singleExpand: false,
useArrows: true,
animate:true,


root : new Ext.tree.AsyncTreeNode({
text: this.rootID,
id : this.rootID,
expanded : true,
draggable : false,
uiProvider:false
}),
listeners: {
click: function(n) {
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
var tabid = n.id.replace("/", "-");
var tabpanel = new Example.Tab();
if(n.id == "0"){
return false;
}else{
var tabitem = tabpanel.getComponent(tabid);
if(!tabitem){
tabpanel.onAddTab(n.id, n.text);
}else{
tabpanel.setActiveTab(tabid);
}
}
}
}
}
});
Example.Tree.superclass.initComponent.apply(this, arguments);
new Ext.tree.TreeSorter(this, {folderSort:true});
}
});

// register xtype
Ext.reg('exampletree', Example.Tree);

// eof




Tab Panel Code


Example.Tab = Ext.extend(Ext.TabPanel, {

initComponent: function() {
// component configuration code here!
Ext.apply(this, {
id: 'content-panel',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
autoDestroy:false,
width:600,
height:500,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu(),
activeTab: 0,
items:[{
title: 'Welcome',
iconCls: 'tabs',
html: 'Welcome to Atmel Intranet Home Page.<br/><br/>',
closable:false
}]
});
Example.Tab.superclass.initComponent.apply(this, arguments);
},

onAddTab : function(id, title){
this.add({
id: id.replace("/", "-"),
title: title,
iconCls: 'tabs',
margins:'0 0 0 0',
listeners: {
activate: function() {
this.load({
url: indexurl+id
, text: 'Loading content...'
, scripts: true
});
}
},
closable:true
}).show();
}

});

Ext.reg('exampletab', Example.Tab);



there is no error but the tab is not creating

Can anyone help me is there any error?
or i am writing the script in wrong way.

regards
Murali krishna .L

Condor
26 May 2010, 12:45 AM
You need to call doLayout() after add()ing items.