View Full Version : [Solved] TabPanel panels overlap initially.

15 Jun 2010, 6:51 AM
See thread: http://www.sencha.com/forum/showthread.php?103899-Solved-but-is-it-a-bug-TabPanel-layout-how-do-you-write-it

Latest version of ExtJS.

I have 3 gridPanel.
Each gridPanel uses its own datastore.

I have a tabPanel that houses the 3 gridPanels.
Each gridPanel was added to the tabPanel via tabPanel.add(gridPanel1) etc.
After each add I then tell the dataStore that is associated to that gridPanel to load.

Problem is that on the initial rendering of the tab panel the content from the various tabs are overlapping in the display so you can see content from tab 1 and tab2 at the same time or tab 1 and tab 3 depending on what is loads first from the call.

Why is this occuring?

Also, the tabPanel is constructed in a function and is returned to a parental page that adds it to the new Window.
after all the code from the new window is complete it calls win.show().

So, would this cause the issue?

15 Jun 2010, 7:41 AM
Need to see code.

15 Jun 2010, 7:45 AM
I was afraid someone might ask for that. Due to my very non ideal work situation, my system that has the code is not allowed on the internet while at work. I know its a WTF brain stumper. I will post code tonight after work.

16 Jun 2010, 10:32 AM
Okay now I can post some code as I am working in a different location.
Its not all the code only because nobody wants to read over 300 lines of it.
Basically from another function where panels are populated with grid panels that get put into a tab panel the grids are created in function below with a handler.

not all the time but more than i care the panels tend to render and you view them in a stacked like format.
So, i would like to prevent it from doing that.

self.createGP = function(argCnfg){
fireBugLog(self.modName + ': createGP('+argCnfg.id+')');
// Create a new grid pane for displaying information
var tempGridPanel = new Ext.grid.GridPanel({
id:'tp' + argCnfg.id,
draggable: false,
// associate a datastore to this grid panel
ds: argCnfg.dataStore,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
// TODO Column Model needs to be constructed outside of this method
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
// Specify the dataIndex which maps to a field specified in the Ext.Data.Reader
{header: "ID", width: 45, sortable: true, dataIndex: 'id'},
{header: "Title", width: 275, sortable: true, dataIndex: 'title'},
{header: "Link", width: 90, sortable: true, dataIndex: 'itemURL'}

viewConfig: {

// Create a handler that will populate the display area with grid row selected information

return tempGridPanel;
}; // createGP

function createGPHandler(argGridPanel){
argGridPanel.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
fireBugLog(self.modName + ': ' + r.data);
// open a new window
GLOBAL_EXTJS.popupUrl({url:r.data.itemURL, winName:'umERGrid', options:''});
} // if
} // createGPHandler

16 Jun 2010, 10:43 AM
I discovered a side effect from the above code with the bbar: Status Bar. I am sure its just me misusing the code, but

bbar: new Ext.ux.StatusBar({
id: xConfig.statusBarID,
useDefaults: true,
defaultText: 'Ready',
xtype: 'button',
id: xConfig.btnID,
text: 'Reload',
width: 75,
handler: gridLoader.createDelegate(

What happens is this.
If I click on the reload button in the bbar it works just fine.
If I select a row it opens a window just fine.
If I click on the reload button again it acts funny such that the datastore reloads but then it reopens the window again for the row selected.

How do i correct this?