TabPanelにNestedListを埋め込む方法

Question

私は最初のタブにsplitviewコントローラを含むタブパネルビューを作成しようとしています。タブパネルの1つのタブに「キッチンシンク」デモが配置されていると考えてください。他はネストされたリストを含んでいません。

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

わかりました。私はあなたのために、この例を作成しました：http://www.senchafiddle.com/#ynn40は

ます。また、ここから全体のソースをダウンロードすることができます

私は多くを追加したように、すべてのファイルに目を通すようにしてくださいhttp://rwd.me/FG5s（それはSDKが含まれて非常に大きいです）ドキュメントの。

いくつかの注意：

1. 私はSencha.view.SplitViewと呼ばれる新しいコンポーネントを作成しました。これは明らかに何かと呼ぶことができます。それは、我々は単にそれを必要としExt.tab.Panelである私たちのMain.jsファイル（にそれを含めることができますので、splitviewのXTYPEを持っている。

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

   これはタブパネル内のアイテムですので、我々はそれをtitleコンフィギュレーションを与える必要があります。あまりにも当然のことながら、私たちはどこにでもこのSplitviewコンポーネントを含めることができ

2. をあなたはそれがSplitViewで定義されているstore設定がある見ることができるように：。

   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からネストされたリストにストアを渡すために使用されます（これは1秒後に取得されます）。もちろん、私たちは、ネストされたリストを更新するために、適切なメソッドを追加しない限り、その構成は何もしません。あなたが見ることができるように

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

   、我々は単にSplitViewの新しい値でnestedList（存在する場合）ストアを更新しています格納。 SplitViewのinitializeメソッド内

3. 、我々は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')); 
   } 
   

うまくいけば、これは理にかなっているし、あなたを助けます。そうでない場合は、私に知らせてください。