Sencha Touch, panneau Dock dans la liste imbriquée

Question

J'ai une application Sencha Touch qui a une liste imbriquée.

La liste nestedList crée automatiquement sa propre barre d'outils.

Je voudrais ancrer un panneau en dessous de la barre d'outils, mais au-dessus des éléments de liste. Et j'ai seulement besoin de cela au plus haut niveau de la liste. J'espère l'avoir disparaître après la sélection de la première feuille.

Cela ressemble-t-il à quelque chose de faisable? Comme vous pouvez le voir dans mon code, j'ai seulement la possibilité d'ancrer un panneau d'éléments au-dessus de la barre d'outils actuelle.

Merci beaucoup d'avance. J'apprécie vraiment tous les conseils que vous pourriez avoir.

• Al.

Ci-dessous ce que j'ai jusqu'à présent ...

// 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

question ancienne, je sais, mais pour résoudre ce problème, vous pouvez supprimer la barre d'outils de la liste (sans le détruire) et l'ajouter à un panneau au-dessus de la liste. Toutes les fonctionnalités imbriquées restent les mêmes dans la barre d'outils. Voici la solution que j'ai:

D'abord, je crée une vue qui va de NestedList et contient une barre d'outils:

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

Ensuite, j'ai créé un panneau principal avec une mise en page de Vbox qui contient un groupe d'enfants et ce barre d'outils:

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

}); 

Puis, dans un contrôleur, j'écoute l'événement initialize de la liste imbriquée. Quand il est déclenché, je supprime la barre d'outils de la liste imbriquée et l'ajoute au panneau.

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

Remarque, je devais ajouter quelques contrôles pour vérifier que les composants ont été correctement initialisés avant de les utiliser, mais le cœur de celui-ci vient à la list.remove (barre d'outils, false) suivi du infocont.add (barre d'outils) commandes. L'indicateur false dans la méthode .remove() signifie que l'élément ne sera pas détruit, il est donc disponible pour être ajouté de nouveau au panneau.