Sencha Touch，嵌套列表内的停靠面板

Question

我有一个带有嵌套列表的 Sencha Touch 应用程序。

nestedList 自动创建自己的工具栏。

我想在工具栏下方停靠一个面板，但在列表项上方。我只需要在列表的顶层使用它。我希望在选择第一片叶子后让它消失。

这听起来可行吗？正如您在我的代码中看到的那样，我只能将项目面板停靠在当前工具栏的顶部。

提前非常感谢。我非常感谢你们提出的任何建议。

• 艾尔.

以下是我目前所拥有的......

  // 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;
            }
    });  

Answer 1

老问题，我知道，但要解决这个问题，您可以从列表中删除工具栏（不破坏它）并将其添加到列表上方的面板中。工具栏上的所有 nestedList 功能都保持不变。这是我的解决方案：

首先，我创建了一个从 NestedList 扩展并包含工具栏的视图：

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'
            }
        ]
    }
}
});

接下来，我创建了一个带有 vbox 布局的主面板，其中包含一个子面板和这个工具栏：

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
        }
    ]        
}

});

然后，在控制器中，我监听嵌套列表的初始化事件。当它被触发时，我从嵌套列表中删除工具栏并将其添加到面板中。

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();
}

注意，我必须添加一些检查以确保在使用组件之前正确初始化它们，但它的核心在于 list.remove(toolbar, false) 后跟 infocont.add(toolbar) 命令. .remove() 方法中的 false 标志表示该项目不会被销毁，因此可以重新添加到面板中。