PDA

View Full Version : Same Grid in multiple tabs?


catacaustic
26 Sep 2007, 4:47 PM
I've got a bit of a dilema... I've got an editable grid that is bringing in different fields to edit depending on what the user chooses, and so far that's not a problem. The problem is that the customer has decided that they want to have tabs set up so that when users click on each tab, the grid changes to the correct columns as it does now.

I have tried to do this by adding in GridPanels for each option that I need, but I can only add in one and then I get an error adding any more. I'm assuming that this is because I can only add an existing Grid to one GridPanel?

Does anyone have any ideas on how I might be able to get this to work?
fay
27 Sep 2007, 1:16 AM
You wouldn't necessarily have to put a grid/grid panel into seperate TabPanelItems. I'd take the following approach:



Seperate my layout into north and center regions.
Make the north the height of a tab panel's caption.
Add Content Panels (or a TabPanel and TabPanelItems) to the north - they don't have to contain anything.
Add your grid/grid panel to the center.
On activate of a northern TabPanel, update the grid in the center.


This should get you started:


var MyLayout = function(){

return {
init: function(){
var Layout = new Ext.BorderLayout(document.body, {
north: {split:false, collapsible: false, initialSize: 25, tabPosition: 'top', alwaysShowTabs: true, fitContainer: true},
center: {split:false, fitToFrame: true, collapsible: false}
});

Layout.beginUpdate();
Layout.add('north', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Columns 1'}));
Layout.add('north', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Columns 2'}));
Layout.add('center', new Ext.ContentPanel('center-div'));

Layout.getRegion('north').showPanel(0);

Layout.endUpdate();

Layout.getRegion('north').getTabs().on('tabchange', function(tPanel, tItem){
alert(tPanel.items.indexOf(tItem));
});
}
}
}();
Ext.onReady(MyLayout.init, MyLayout);
</script>

</head>

<body>
<div id="center-div"><div>
</body>
</html>
catacaustic
27 Sep 2007, 5:04 PM
I like the sound of that idea. I'll have a go and see if I can get it to work as easily as it sounds! :D