PDA

View Full Version : Use one grid in multiple tabs



kdm
10 Jun 2010, 8:45 AM
Is it possible to have a global grid defined and use it within multiple tabs? When i attempt to do this the grid loads in the last tab only.



hostStore = new Ext.data.ArrayStore({
autoDestroy: true,
storeId: 'myStore',
idIndex: 0,
fields: [
'device_id',
'device_fqdn',
{name: 'initial_discovery_date', type: 'auto'}
]
});

hostDetailPaging = new Ext.PagingToolbar({
pageSize: 50,
store: hostStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});

hostDetailPanel = new Ext.Panel({
//id: 'hostDetailPanel',
title: 'Hosts',
layout: 'fit',
border: true,
flex: 2,
items: {
xtype: 'grid',
store: hostStore,
columns: [
{id: 'fqdn', header: 'FQDN', dataIndex: 'device_fqdn'},
{header: 'Discovery Date', dataIndex: 'initial_discovery_date', width: 120}
],
bbar: hostDetailPaging
}
});

Ext.onReady(function(){

// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel({
deferredRender: true,
layoutOnTabChange: true,
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
items:[{
id:'tab1',
contentEl:'tabs',
title: 'Main',
closable:false,
autoScroll:true,
items: [hostDetailPanel]
},{
id:'tab2',
contentEl:'tabs',
title: 'Main 2',
closable:false,
autoScroll:true,
items: [hostDetailPanel]
},{
id:'tab3',
contentEl:'tabs',
title: 'Main 3',
closable:false,
autoScroll:true,
items: [hostDetailPanel]
}]
});

// Configure viewport
viewport = new Ext.Viewport({
items:[tabPanel]
});
});

wm003
10 Jun 2010, 9:31 AM
i guess this task needs some optical faking: Create a Tabpanel with no content on the tabs at all.
Under this tabpanel you create a gridpanel (which is _not_ part of tabpanel). Then it's up to you to react on tab-clicking and changing the grid-store according to your needs.



var hostDetailPanel = new Ext.grid.GridPanel({
region:'center',
store: hostStore,
columns: [
{id: 'fqdn', header: 'FQDN', dataIndex: 'device_fqdn'},
{header: 'Discovery Date', dataIndex: 'initial_discovery_date', width: 120}
],
bbar: hostDetailPaging
});
//tabPanel items do not have own item hostDetailPanel anymore, just leave the content empty.

var tabPanel = new Ext.TabPanel({
region:'north',
deferredRender: true,
layoutOnTabChange: true,
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
listeners: {
tabchange: function(tabpanel,tab) {
//do something with the gridpanel now
}
},
items:[{
id:'tab1',
title: 'Main',
closable:false
},{
id:'tab2',
title: 'Main 2',
closable:false
},{
id:'tab3',
title: 'Main 3',
closable:false
}]
});
viewport = new Ext.Viewport({
items:[tabPanel,hostDetailPanel]
});

kdm
10 Jun 2010, 9:59 AM
Think i got it now. Thanks for the help.



var tabPanel = new Ext.TabPanel({
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
listeners: {
tabchange: function(tabpanel,tab) {
tab.add(hostDetailPanel);
tab.doLayout();
}
},
items:[{
id:'tab1',
contentEl:'tabs',
title: 'Main',
closable:false
},{
id:'tab2',
contentEl:'tabs',
title: 'Main 2',
closable:false
},{
id:'tab3',
contentEl:'tabs',
title: 'Main 3',
closable:false
}]
});

wm003
10 Jun 2010, 10:39 AM
But this will render the grid 4 times in the DOM instead of only 1. Not sure what sideeffects that would give

kdm
10 Jun 2010, 10:54 AM
When the tab is changed I will remove all records from the store and load it with the new data set. I'm trying to avoid redundancy with the code. Each tab panel needs a grid with the same fields and column model. The only thing that will change is the dataset via jsonReader. Maybe i should just create a separate grid for each tab?? Thoughts?? :-?

Elijah
10 Jun 2010, 11:03 AM
could try something such as using a function to return to you new panels.


function hostDetailPanel(argID, argDataStore){
var tmpPanel = new Ext.Panel({
//id: argID,
title: 'Hosts',
layout: 'fit',
border: true,
flex: 2,
items: {
xtype: 'grid',
store: argDataStore,
columns: [
{id: 'fqdn', header: 'FQDN', dataIndex: 'device_fqdn'},
{header: 'Discovery Date', dataIndex: 'initial_discovery_date', width: 120}
],
bbar: hostDetailPaging
}
})

//
return tmpPanel;
};


Then you could for the items


items:[
hostDetailPanel('tab1', dataStore1),
hostDetailPanel('tab2', dataStore2),
hostDetailPanel('tab3', dataStore3)
]