View Full Version : What is the best way to switch from an opening card to a NestedList with the back?

19 Jan 2011, 6:49 AM
Right now I've got an app with this basic structure:

* Opening Panel
* NestedList1
* NestedList2

All are enclosed in the mainPanel.

I can arrange for buttons to switch from the opening panel to either NestedList1 or NestedList2, but the backButton is hidden in the NestedList when it first arrives. Fine. That can be unhidden. But do I need to hack into the stack and insert the main page? Or is there a preferred way to do this?


19 Jan 2011, 7:49 AM
Looking at the code for NestedList, it appears you can pass in your own toolbar and it will add the back button to it:

if (!this.toolbar || !this.toolbar.isComponent) {

* @cfg {Object} toolbar
* Configuration for the Ext.Toolbar that is created within the Ext.NestedList.
this.toolbar = Ext.apply({}, this.toolbar || {}, {
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: title,
items: []
this.toolbar = new Ext.Toolbar(this.toolbar);

this.dockedItems = this.dockedItems || [];
} else {
this.toolbar.insert(0, this.backButton);

So you can do something like this:

var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Groceries',
displayField: 'text',
store: store,
toolbar:{items:[{xtype:'button', text:'Foo'}]}

(This goes with the example in the NestedList docs.)

The limitation being that this is YOUR button, not the back button. The back button is still there and will get shown first on pages it is applicable to. So if you add your own back button, you'll also need to hook into the events so you can hide it on anything other than the first page.

Sound good?

19 Jan 2011, 8:02 AM
Thanks very much for this. Which events should I watch to hide my button? I suppose this is much more elegant than hacking into the items array of NestedList.

19 Jan 2011, 8:05 AM
No problem! I'd say you'd probably want to tie into cardswitch or beforecardswitch (the latter might avoid some flicker, not sure).

There are a lot of nuggets of really useful functionality like this in the library which aren't at all obvious. I'd really love to see screencasts that went through each and every component and gave us a tour of all their capabilities.