PDA

View Full Version : NestedLayout toolbar resizing but not positioned



scottpederick
22 Aug 2007, 5:30 AM
Hi All,

I've got an odd problem when trying to set up a NestedLayout with a toolbar and was wondering if someone can point me in the right direction. As I resize the center panel the toolbar adjusts width in line with the center panel but it is originating on the left underneath the west panel. (See attached screenshots).

Do I need to subscribe to the resize event and manage this myself or have I mis-used the layout in some way? I've read the posts regarding NestedLayout and toolbars but I think I'm looking at a slightly different setup than those referred to.

What I'm trying to do is set up a selectable grid/thumbnail view. The idea is to create two panels in the center with hidden the titlebar and tabs - one a View and the other a Grid. They both feed off the same datastore so I can then just use a showPanel() to display one or the other.

The issue is that I need to use a common PagingToolbar to control the DataStore that affects both panels. Possibly I could create two identical toolbar instances and attach them to the ContentPanels instead but I'd prefer this cleaner solution, if it's possible.

My html is thus:



<div id="layout">
<div id="west-panel">
<div id="components"></div>
</div>
<div id="center-panel">
<div id="panel-toolbar"></div>
<div id="inner-content">
<div id="viewer_thumbnail"></div>
<div id="viewer_detail"></div>
</div>
</div>
</div>


and my (trimmed for clarity) javascript is:



var ds = new Ext.data.Store({ ... });

var toolbar = new Ext.PagingToolbar(
'panel-toolbar',
ds,
{ ... }
);
//Create rest of toolbar buttons
//...

//Determine the toolbar height to add margin on layout
var toolbarHeight = this.toolbar.getEl().getHeight();

var layout = new Ext.BorderLayout('layout', {
west: {
initialSize:200,
split:true,
titlebar:true
},
center: {
titlebar: false,
hideTabs: true,
fitToFrame: true,
margins: {top: toolbarHeight, left: 0, right: 0, bottom: 0},
cmargins: {top: toolbarHeight, left: 0, right: 0, bottom: 0}
}
});
layout.beginUpdate();

layout.add('west', new Ext.ContentPanel('components', {
title:'Components',
fitToFrame:true,
autoScroll:true
}));

var innerLayout = new Ext.BorderLayout('inner-content', {
center: {
titlebar: false,
hideTabs: true
}
});
innerLayout.beginUpdate();

innerLayout.add('center', new Ext.ContentPanel('viewer_thumbnail', {
title:'Thumbnail View',
fitToFrame:true,
fitToContainer: false
}));
innerLayout.add('center', new Ext.ContentPanel('viewer_detail', {
title:'Detail View',
fitToFrame:true,
fitToContainer: false
}));

var nestedPanel = new Ext.NestedLayoutPanel(
innerLayout,
{
fitToFrame: true,
fitToContainer: false,
toolbar: toolbar
}
);
layout.add('center', nestedPanel);

innerLayout.endUpdate();
layout.endUpdate();