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

Question

我有一个 Sencha Touch 应用程序，它有一个嵌套列表。

嵌套列表自动创建自己的工具栏。

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

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

预先非常感谢。我真的很感谢你们提出的任何建议。

• 阿尔。

以下是我到目前为止所拥有的......

 // 菜单页
    var 菜单 = new Ext.NestedList({ 
        全屏：真实，
        标题：“菜单”，
        显示字段：'文本'，
        商店：菜单商店，

// ** 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 标志意味着该项目不会被销毁，因此可以将其重新添加到面板中。