PDA

View Full Version : Adding toolbar between NestedList title and list item collection



sench23
28 Dec 2010, 6:25 AM
Hello,
I am trying to the the following layout with NestedList:


<TabPanel>
<NestedList>
[Title]
[Action buttons (toolbar)]

[ListItem collection]
</NestedList>
<Bottom tab bar />
</TabPanel>
I docked the tab bar to the bottom with the following code

tabBar: { dock:'bottom', scroll:'horizontal',
layout: { pack:'center' } }but i cannot stick that 'action buttons bar' between the title and the list items collection, I managed only to dock it to the top or bottom. Here is that bar


var actionBar = new Ext.Toolbar({
dock:'bottom',
align:'center',
layout: { pack:'center' },
defaults: { xtype:'button', width:130 },
items:[
{ text: 'Option 1' },
{ text: 'Option 2' },
{ text: 'Option 3' }
]
});
Any suggestions how to do this or to use any alternative extjs controls?

sench23
28 Dec 2010, 6:26 AM
I managed to do this layout by specifying 'useToolbar:true' and 'toolbar: ' properties in the nested list (added my buttons there), and also docked another toolbar to the top of the list so I got it like


<NestedList>
<Toolbar with title />
<Toolbar with buttons />
<ListItems />
</NestedList>
Now, I need two things:
1) Any method I can call to manually slide back from the detail card. I need to implement my own 'back' button, since I need it to appear in that top toolbar with title?
2) Any suggestion on how to add a 'display more' button at the end of the scrolling list (not to dock it to the bottom of the list's container, I don't want it to be visible all the time, only when user scrolls to the end of the list)?

Any help would be very much appreciated.