Как вставить вложенный список в TabPanel?

Question

Я пытаюсь создать представление tabpanel, которое содержит контроллер splitview на первой вкладке. Подумайте, что демонстрация «кухонной раковины» помещается в одну вкладку tabpanel. Остальные не содержат вложенного списка.

http://dev.sencha.com/deploy/touch/examples/production/kitchensink/

Я попытался поместить nestedlist в контейнер, который вы можете увидеть в некоторых из комментировал код, показанный ниже.

На данный момент, это рабочий код показывает только nestlist, поднимающее весь раздел на первой вкладке: установка

 
Ext.application({ 
    name: 'Test', 

    requires: [ 
     'Ext.dataview.NestedList', 
     'Ext.navigation.Bar' 
    ], 

    launch: function() { 
     Ext.create("Ext.TabPanel", { 
      fullscreen: true, 
      tabBarPosition: 'bottom', 
      items: [ 
       { 
        id: 'tab4', 
        title: 'Tab4', 
        iconCls: 'star', 
//     xtype: 'container', 
//     items: [ 
//      { 
          xtype : 'nestedlist', 
          displayField: 'text', 
//       docked: 'left', 

          store: store 
//      } 
//      , 
//      { 
//       html: 'Detail View' 
//      } 
//     ] 
       }, 
       { 
        id: 'tab2', 
        title: 'Tab2', 
        iconCls: 'star', 

        html: 'No nav bar?' 
       }, 
       { 
        id: 'tab3', 
        title: 'Tab3', 
        iconCls: 'star', 

        html: 'Screen3' 
       } 
      ] 
     }).setActiveItem(0); 
    } 
}); 

Магазин:

 
Ext.Loader.setConfig({ enabled: true }); 

var data = { 
    text: 'Groceries', 
    items: [ 
     { 
      text: 'Drinks', 
      items: [ 
       { 
        text: 'Water', 
        items: [ 
         { 
          text: 'Sparkling', 
          leaf: true 
         }, 
         { 
          text: 'Still', 
          leaf: true 
         } 
        ] 
       }, 
       { 
        text: 'Coffee', 
        leaf: true 
       }, 
       { 
        text: 'Espresso', 
        leaf: true 
       }, 
       { 
        text: 'Redbull', 
        leaf: true 
       }, 
       { 
        text: 'Coke', 
        leaf: true 
       }, 
       { 
        text: 'Diet Coke', 
        leaf: true 
       } 
      ] 
     }, 
     { 
      text: 'Fruit', 
      items: [ 
       { 
        text: 'Bananas', 
        leaf: true 
       }, 
       { 
        text: 'Lemon', 
        leaf: true 
       } 
      ] 
     }, 
     { 
      text: 'Snacks', 
      items: [ 
       { 
        text: 'Nuts', 
        leaf: true 
       }, 
       { 
        text: 'Pretzels', 
        leaf: true 
       }, 
       { 
        text: 'Wasabi Peas', 
        leaf: true 
       } 
      ] 
     } 
    ] 
}; 

Ext.define('ListItem', { 
    extend: 'Ext.data.Model', 
    config: { 
     fields: [ 
      { 
       name: 'text', 
       type: 'string' 
      } 
     ] 
    } 
}); 

var store = Ext.create('Ext.data.TreeStore', { 
    model: 'ListItem', 
    defaultRootProperty: 'items', 
    root: data 
}); 

Answer 1

Okay. Я создал этот пример для вас: http://www.senchafiddle.com/#ynn40

Вы также можете скачать весь источник здесь: http://rwd.me/FG5s (довольно большой, как она включает в себя SDK)

Будьте уверены, чтобы просмотреть все файлы, как я добавил много документации.

Некоторые примечания:

1. Я создал новый компонент под названием Sencha.view.SplitView. Это, очевидно, можно назвать чем угодно. Он имеет xtype из splitview так что мы можем просто просто требуют его и включить его в наш Main.js файл (который является Ext.tab.Panel.

   { 
       xtype: 'splitview', 
       title: 'SplitView', 
       store: 'Items' 
   } 
   

   Поскольку это элемент внутри tabPanel, мы должны дать ему конфигурацию title . тоже, конечно, мы могли бы включить этот компонент в любом месте SplitView

2. Как вы можете видеть, что имеет конфигурацию store, которая определена в SplitView:.

   config: { 
       /** 
       * We create a custom config called store here so we can pass the store from this component 
       * (SplitView) down into the nested list when it updates. Checkout {@link #updateStore} 
       * @type {Ext.data.Store} 
       */ 
       store: null 
   } 
   

   Это используется, чтобы передать хранилище из splitview во вложенный список (мы займемся этим через секунду). Конечно, эта конфигурация не будет делать ничего, если не добавить соответствующие методы для обновления вложенного списка:

   /** 
   * This is called when the {@link #store} config has been updated. 
   * We simply check if the nested list has been created, and if it has, set the store 
   * on it with the new value. 
   */ 
   updateStore: function(newStore) { 
       if (this.nestedList) { 
        this.nestedList.setStore(newStore); 
       } 
   } 
   

   Как вы можете видеть, мы просто обновление (если он существует) магазин nestedList с новым значением SplitView магазин.

3. Внутри initialize метода SplitView, мы создали как detailContainer (где подробно карта вложенного списка должны идти) и nestedList, а затем добавить их в SplitView. Убедитесь, что вы смотрите на некоторые из конфигураций, которые мы даем nestedList, поскольку они важны.Конфигурация магазина:

   // Set the store of this nested list to the store config of this component (Splitview) 
   store: this.getStore() 
   

   detailCard и detailContainer конфигурации:

   // Tell the nested list to have a detail card and put it inside our new detailContinaer 
   detailCard: true, 
   detailContainer: this.detailContainer 
   

   И, конечно же, слушатели, так как мы знаем, когда все кувырком:

   // And finally add a listener so we know when to update the detail card 
   listeners: { 
       scope: this, 
       leafitemtap: this.onLeafItemTap 
   } 
   

4. Наконец мы добавим onLeadItemTap метод в Splitview (мы добавили слушателя выше), который должен обновить подробную карту с новой информацией:

   /** 
   * This is called when a leaf item is tapped in the nested list, or when the detail card 
   * should be updated. In here, we just get the record which was tapped and then set the HTML 
   * of the detail card. 
   */ 
   onLeafItemTap: function(nestedList, list, index, node, record, e) { 
       var detailCard = nestedList.getDetailCard(); 
       detailCard.setHtml(record.get('text')); 
   } 
   

Надеемся, что это имеет смысл, и помогает вам. Если нет, дайте мне знать.