steve.neill
07-13-2007, 06:12 PM
I've run across a problem whilst working on a fairly complex UI. I'm not sure if it's a bug or just that I'm not doing something the right way. I'll try and explain the steps...
1. I create a TabPanel... tabPanel = new Ext.TabPanel(domElement);
2. I add a tab to this TabPanel... tab = tabPanel.addTab(id, title);
3. I create a ToolBar... toolbar = new Ext.Toolbar(tabPanel.bodyEl);
4. I create a BorderLayout... layout = new Ext.BorderLayout(tabPanel.bodyEl, { center: { toolbar: toolbar } });
So, I have a tab hosting a border layout, comprising a 'center' region with a toolbar. So far so good.
Now it gets interesting, because what I want to do is use the 'center' region to host multiple 'workspaces' as NestedLayoutPanels. It's important to note that I'm using a region so these workspaces can be swapped in and out using the regions add() and remove() methods.
5. Create a workspace... wsDom = Ext.DomHelper.append(layout.getRegion('center').bodyEl, { tag: 'div' });
6. Create a workspace layout... wsLayout = { center: {} };
7. Create a workspace BorderLayout... wsBorderLayout = new Ext.BorderLayout(wsDom, wsLayout);
8. Create the NestedLayoutPanel for the workspace... wsLayoutPanel = new Ext.NestedLayoutPanel(wsBorderLayout);
And this is where it all goes bad...
9. Add the nested layout panel to the layout (created in step 4)... layout.getRegion('center').add(wsLayoutPanel);
The wsLayoutPanel gets added to the center region, but the toolbar (created in step 3) vanishes!
What appears to be happening is that the 'top' style property for the 'center' layout region (from step 4) gets set to 0 in step 9, thus hiding the toolbar. In fact, if I disable the 'top' style property of the 'center' region in Firebug, voila! the toolbar reappears!
Elsewhere in the Ext code, setSize() and adjustForComponents() gets called ensuring toolbars and the like are taken into consideration... but not in this scenario.
Is this a bug or is there something I'm not doing right? Please help...
Thanks,
Steve
1. I create a TabPanel... tabPanel = new Ext.TabPanel(domElement);
2. I add a tab to this TabPanel... tab = tabPanel.addTab(id, title);
3. I create a ToolBar... toolbar = new Ext.Toolbar(tabPanel.bodyEl);
4. I create a BorderLayout... layout = new Ext.BorderLayout(tabPanel.bodyEl, { center: { toolbar: toolbar } });
So, I have a tab hosting a border layout, comprising a 'center' region with a toolbar. So far so good.
Now it gets interesting, because what I want to do is use the 'center' region to host multiple 'workspaces' as NestedLayoutPanels. It's important to note that I'm using a region so these workspaces can be swapped in and out using the regions add() and remove() methods.
5. Create a workspace... wsDom = Ext.DomHelper.append(layout.getRegion('center').bodyEl, { tag: 'div' });
6. Create a workspace layout... wsLayout = { center: {} };
7. Create a workspace BorderLayout... wsBorderLayout = new Ext.BorderLayout(wsDom, wsLayout);
8. Create the NestedLayoutPanel for the workspace... wsLayoutPanel = new Ext.NestedLayoutPanel(wsBorderLayout);
And this is where it all goes bad...
9. Add the nested layout panel to the layout (created in step 4)... layout.getRegion('center').add(wsLayoutPanel);
The wsLayoutPanel gets added to the center region, but the toolbar (created in step 3) vanishes!
What appears to be happening is that the 'top' style property for the 'center' layout region (from step 4) gets set to 0 in step 9, thus hiding the toolbar. In fact, if I disable the 'top' style property of the 'center' region in Firebug, voila! the toolbar reappears!
Elsewhere in the Ext code, setSize() and adjustForComponents() gets called ensuring toolbars and the like are taken into consideration... but not in this scenario.
Is this a bug or is there something I'm not doing right? Please help...
Thanks,
Steve