PDA

View Full Version : Nested List to Panel to another Nested List



KPChow
25 Oct 2011, 12:26 PM
Hi guys,

I know that you can create a panel at the end of a nested list, as shown below:



var menuNestedList = new Ext.NestedList({
title: 'Menu',
iconCls: 'favorites',
fullscreen: true,
scroll:'vertical',
store: store,
getDetailCard : function(record, parentRecord) {
return new Ext.Panel({
// target content update here
listeners: {
activate: function(){
menuNestedList.toolbar.setTitle(record.attributes.record.get('text'));
},
},
html: 'Text goes here',
layout: {
type : 'vbox',
align: 'stretch'
},
defaults: {
layout: {
type: 'hbox',
},
defaults: {
xtype: 'button',
flex: 1,
style: 'margin: .5em;'
}
},
items: [
{
items: [
{ text: 'True' },
{ text: 'False'}
]
}
]
});
}
});



What I like to do from here is to have a button on the panel (easy peasy), which would take you to another nested list and also having the back button to take you back to the panel. Is that possible? :-/

Thanks
K

knappe
28 Oct 2011, 8:31 AM
Have you solved this? I would like to do something similar.

I have solved how to display both lists, but not how to navigate back to the first list.

Here is how I'm showing both nested lists:

I draw both nested lists on init of the viewport, but hide the second list. When I reach a leaf and the button has been clicked, I remove the original nested list and un-hide the second list. I haven't solved how to then go back (you can show the back button by overriding the syncToolbar method and setting backToggleMth = 'show';) because the old nested list doesn't display properly after unhidden or redrawn .

-Tyler