PDA

View Full Version : Unable to get nested tabs to work



mampcs
3 Feb 2010, 9:53 PM
Hi, I've been trying to get nested panels to work (with refactored code because the contents of each of the nested tab panels is the same except for some parameters passed in). I'm able to get it to work if I don't refactor the code and just inline the nesting of the tabpanels at the top level. However, this causes too much code duplication.
With the code refactoring, the nested panel shows up very funny (only a small blob shows up). Would appreciate any help on how to get this to work. Thanks in advance.

Code:



index.js:
======

function IncludeJavaScript(jsFile)
{
document.write('<script type="text/javascript" src="'
+ jsFile + '"></script>');
}

IncludeJavaScript('MyTabPanel.js');
IncludeJavaScript('MyGrid.js');

Ext.onReady(function() {

/* For registering xtypes for each tab panel */
var panel1XT;
var panel2XT;

// Create the top level tab panel
var topTabPanel = new Ext.TabPanel({
resizeTabs: true
,enableTabScroll: true
,defaults: {autoScroll: true}
});

// Create the nested tab panels
var panel1Obj = MyTabPanel.myModule(1, 'panel1XT');
var panel2Obj = MyTabPanel.myModule(2, 'panel2XT');

// Dock the nested tab panels in the top level tab panel
topTabPanel.add({title:'TabPanel1', id:'panel1', xtype:'panel1XT'}).show();
topTabPanel.add({title:'TabPanel2', id:'panel2', xtype:'panel2XT'}).show();

win = new Ext.Window({
renderTo: Ext.getBody()
,title:Ext.get('page-title').dom.innerHTML
,x:0
,y:0
,width:1000
,height:600
,layout:'fit'
,closable:false
,stateId:'TopWindow'
,items:[topTabPanel]
});

topTabPanel.setActiveTab('panel1XT');

win.show();
});


MyTabPanel.js:
===========


Ext.ns('MyTabPanel');

MyTabPanel.myModule = function(versionNumber, xt) {

var tabPanel = Ext.extend(Ext.TabPanel, {
initComponent:function() {
var grid1XT;
var grid2XT;

// Create the nested tab panel
var nestedTabPanel = new Ext.TabPanel({
resizeTabs: true
,enableTabScroll: true
,defaults: {autoScroll: true}
});

// Create the grids
var grid1Obj = MyGrid.myModule(versionNumber, 1, 'grid1XT');
var grid2Obj = MyGrid.myModule(versionNumber, 2, 'grid2XT');

// Dock the grids in the nested tab panel
nestedTabPanel.add({title:'Grid1', id:'grid1', xtype:'grid1XT'}).show();
nestedTabPanel.add({title:'Grid2', id:'grid2', xtype:'grid2XT'}).show();

Ext.apply(this, { items:[nestedTabPanel] });
tabPanel.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg(xt, tabPanel);

return {
getPanel : function()
{
return tabPanel;
}
}

}


MyGrid.js:
=======


Ext.ns('MyGrid');

MyGrid.myModule = function(versionNumber, flagNumber, xt) {

var DataStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({url:'DB/rs.php', method: 'POST'})
,baseParams: {task:"LISTING", arg1:versionNumber, arg2:flagNumber}
,reader: new Ext.data.JsonReader({root:'results',totalProperty:'total'}
,[
{name: 'CIndex', type: 'int', mapping: 'cindex'}
,{name: 'Component', type: 'string', mapping: 'cname'}
,{name: 'Owner', type: 'string', mapping: 'owner'}
,{name: 'VersionNo', type: 'int', mapping: 'vNo'}
]),
sortInfo:{field: 'CIndex', direction: "ASC"}
});

var ColModel = new Ext.grid.ColumnModel({
columns: [
{header:'Component', dataIndex:'Component', width:100, align:'center'}
,{header:'Version', dataIndex:'VersionNo', width:100, align:'center'}
,{header:'Owner', dataIndex:'Owner', width:120, align:'center'}
]
,defaultSortable: true
});

var grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
Ext.apply(this, {
store: DataStore
,cm: ColModel
,view:new Ext.grid.GridView()
,stripeRows:true
,viewConfig:{forceFit:true}
,loadMask:true
,header:true
,stateful:false
});

grid.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg(xt, grid);

return {
getGrid : function()
{
return grid;
}
}

}

jay@moduscreate.com
4 Feb 2010, 2:40 PM
those sub tabs need a title.

mampcs
4 Feb 2010, 8:49 PM
I believe they already have a title:

nestedTabPanel.add({title:'Grid1', id:'grid1', xtype:'grid1XT'}).show(); nestedTabPanel.add({title:'Grid2', id:'grid2', xtype:'grid2XT'}).show();

Unless I misunderstood which tabs you were referring to.