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

Question

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

nestedList自动创建自己的toolBar。

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

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

非常感谢。我真的很感谢你们可能有的任何建议。

• Al。

下面是我迄今为止...

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

注意，我不得不添加一些检查，以确保部件在使用前进行正确的初始化，但它的心脏来其次infocont.add的list.remove（工具栏，FALSE） （工具栏）命令。 .remove（）方法中的false标志表示该项目不会被销毁，因此可以将其重新添加到面板中。