PDA

View Full Version : NestedLayout, Toolbar, View, Paging



Alexx
17 Aug 2007, 3:29 AM
Hi, maybe someone has had the same problem as I am having with nested layout and content panels within. What I am trying to do is to have a nested layout which contains tree panels: north: toolbar, center: view and south: PagingToolbar. The reason why I chose nested layout is because view in the center must have scrolling, and, to prevent content panel to scroll all elements together (incl. toolbars, as was explained in early posts), I've put them all in a separate nested layout.
Now the problem is that either toolbar lays outside of the region (i.e. its height is zero), or the paging toolbar :-/, depending on how I add content panels to the nested layout, i.e.:


innerLayout.add('north', new Ext.ContentPanel('innerToolbar'));
innerLayout.add('south', new Ext.ContentPanel('innerPaging'));
innerLayout.add('center', new Ext.ContentPanel('innerView'));
mainLayout.add('center', new Ext.NestedLayoutPanel(innerLayout));

in this case toolbar in the north is visible, but not paging toolbar, and in the following case, its the other way around:


innerLayout.add('south', new Ext.ContentPanel('innerPaging'));
innerLayout.add('north', new Ext.ContentPanel('innerToolbar'));
innerLayout.add('center', new Ext.ContentPanel('innerView'));
mainLayout.add('center', new Ext.NestedLayoutPanel(innerLayout));


This is html code I have:



<body>
<div id="north-div"></div>
<div id="west-div"></div>
<div id="east-div"></div>
<div id="center-div">
<div id="innerToolbar"></div>
<div id="innerView"></div>
<div id="innerPaging"></div>
</div>
</div>
</body>

and this is full js code:



InitObject = function() {
return {
init: function() {

var mainLayout = new Ext.BorderLayout(document.body, {
north: {
split: true,
initialSize: 35
},
west: {
split: true,
initialSize: 140,
titlebar: true,
collapsible: true,
minSize: 50,
maxSize: 300
},
east: {
split: true,
initialSize: 100
},
center: {
autoScroll: false
}
});

mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', {
fitToFrame: true,
closable: false
}));

mainLayout.add('east', new Ext.ContentPanel('east-div', {
fitToFrame: true,
closable: false
}));

mainLayout.add('west', new Ext.ContentPanel('west-div', {
fitToFrame: true,
closable: false
}));

// Center panel contains a nested layout with a toolbar,
// view and a paging toolbar

var myTemplate = new Ext.Template(
'<div id="{id}">' +
'<span>{description}</span></div>'
);

var myData = [
['1', 'first'],
['2', 'second'],
['3', 'third'],
['4', 'forth'],
['5', 'fifth']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'id'},
{name: 'description'}
])
});

var myview = new Ext.View('innerView', myTemplate,
{jsonRoot : 'myData',
totalPoperty : 'TotalCount',
singleSelect: true,
selectedClass: "selectedClass",
store: ds
}
);

var innerToolbar = new Ext.Toolbar('innerToolbar');
innerToolbar.addButton({
text: 'Admin',
cls: 'x-btn-text-icon album-btn',
handler: function(){
}
});

var pagingToolbar = new Ext.PagingToolbar('innerPaging', ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: "No results to display"
});

ds.load();

var innerLayout = new Ext.BorderLayout('center-div', {
north: {
titlebar: false,
autoScroll: false
},
center: {
split: true,
autoScroll: true
},
south: {
titlebar: false,
autoScroll: false
}
});
innerLayout.add('south', new Ext.ContentPanel('innerPaging'));
innerLayout.add('north', new Ext.ContentPanel('innerToolbar'));
innerLayout.add('center', new Ext.ContentPanel('innerView'));
mainLayout.add('center', new Ext.NestedLayoutPanel(innerLayout));

mainLayout.endUpdate();
}
};
}();

Ext.EventManager.onDocumentReady(InitObject.init, InitObject, true);


Any help would be appreciated... thanks!

Alexx
17 Aug 2007, 6:02 AM
Adding innerLayout.beginUpdate() and innerLayout.endUpdate() solved the problem....