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標誌表示該項目不會被銷燬，因此可以將其重新添加到面板中。