Sencha Touch, dock panel inside Nested List

I have a Sencha Touch app that has a nested list.

The nestedList automatically creates its own toolBar.

I would like to dock a panel below the toolbar, but above the list-items. And I only need this on the top-level of the list. I am hoping to have it disappear after the first leaf is selected.

Does this sound like something doable? As you can see in my code, I only have the ability to dock an item panel on top of the current toolbar.

Thanks so m开发者_运维百科uch in advance. I really appreciate any advice you guys might have.

• Al.

Below is what I have so far...

  // Menu Pages
    var menu = new Ext.NestedList({ 
        fullscreen: true,
        title: 'Menu',
        displayField: 'text',
        store: menu_store,

// ** This is the dockedItem I would like to insert between the toolbar and list-items

            dockedItems: [ {
                  xtype     : 'panel',
                    dock        : 'top',
                    html        : '<span>This is the logo panel</span>',
                    cls         : 'front-logo-panel',
                    flex        : 1
                }], 
            // Add Panel for Leaf nodes
            getDetailCard: function(item, parent) {
                var itemData = item.attributes.record.data,
                parentData = parent.attributes.record.data,
                detailCard = new Ext.Panel({
                    scroll: 'vertical',
                    cls: 'menu-item-panel',
                    styleHtmlContent : true,
                    tpl: menuTemplate, 
                    // add button to Leaf Node
                     listeners: {                
                                           activate: function() {
                                        Ext.getCmp('itemToolbar').setTitle('New Title Bar');
                                    }   
                                    }
                }); 
                detailCard.update(itemData);
                this.backButton.setText(parentData.text);
                return detailCard;     
            }, 
            // add template for all nodes
            getItemTextTpl: function() {
                var tplConstructor =  
                '<tpl if="newItem">' +
                    '<span class="list-new-item">New&nbsp;Item!</span>' +
                '</tpl>'+
                '{text}' +
                '<tpl>'+
                    '<div class="metadata">' +
                        '{description:ellipsis(40)}' +
                    '</div>' +
                '</tpl>';
                return tplConstructor;
            }
    });  

Old question, I know, but to solve this, you can remove the toolbar from the list (without destroying it) and add it to a panel above the list. All nestedList functionality stays the same on the toolbar. Here's the solution I have:

First, I created a view that extends from NestedList and contains a toolbar:

Ext.define('MyApp.view.DynamicList', {
extend: 'Ext.dataview.NestedList',
alias: 'widget.dynamiclist',
config: {
    toolbar: {
        xtype: 'toolbar',
        docked: 'top',
        itemId: 'header-bar',
        layout: {
            pack: 'end',
            type: 'hbox'
        },
        items: [
            {
                xtype: 'spacer'
            },
            {
                xtype: 'button',
                itemId: 'show-nav-sheet-button',
                ui: 'plain',
                width: 45,
                iconCls: 'more'
            }
        ]
    }
}
});

Next, I created a main panel with a vbox layout that contains a child panel and this toolbar:

Ext.define('MyApp.view.MainContainer', {
extend: 'Ext.Container',

requires: [
    'MyApp.view.DynamicList'
],

config: {
    id: 'main-container',
    layout: {
        type: 'vbox'
    },
    items: [            

        {
            xtype: 'panel',
            flex: 1,
            itemId: 'info-container'                
        },
        {
            xtype: 'dynamiclist',
            flex: 1
        }
    ]        
}

});

Then, in a controller, I listen for the initialize event of the nested list. When it's fired, I remove the toolbar from the nested list and add it to the panel.

onNestedListInitialize: function() {
    // need to wait until everythin is initialized;
    var me = this;

    var renderFn = function renderPanels() {
        var main = me.getMainContainer();

        // wait until main is intialized;
        if(!main) {
            Ext.defer(renderFn, 50, this);
            return;
        }

        var list = main.down('#my-list');
        var infocont = main.down('#info-container');

        // wait until the container's components are initialized
        if(!list || !infocont) {
            Ext.defer(renderFn, 50, this);
            return;
        }

        // remove the toolbar from the list, and add it to the container. 
        var toolbar = list.down('#header-bar');         
        list.remove(toolbar, false);
        infocont.add(toolbar);

    }

    // call the function for the first time.
    renderFn();
}

Note, I had to add a few checks to make sure the components were correctly initialized before using them, but the heart of it comes to the list.remove(toolbar, false) followed by the infocont.add(toolbar) commands. The false flag in the .remove() method means that the item won't be destroyed, so it's available to be re-added to the panel.