Sencha Touch 2：導航帶級聯數據視圖的視圖

Question

我是Sencha Touch和移動應用程序開發新手。 我需要在我的應用程序來實現看起來應該和這樣的表現主要觀點：

Group1      Group2 
_________________________ _________________________ 
Item1  Item2  Item3 Item1  Item2  Item3 

Group3      Group4 
_________________________ _________________________ 
Item1  Item2  Item3 Item1  Item2  Item3 

Group5      Group6 
_________________________ _________________________ 
Item1  Item2  Item3 Item1  Item2  Item3 

         ... 

組塊胸圍內聯和垂直滾動。 項目必須水平滾動。 每組的項目數可能因組而異。

組存儲在「storeMainNavGroups」存儲中。 項目存儲在「storeMainNav」商店中，該商店按......「組」分組！

我認爲，它應該通過級聯的數據視圖來完成： 1RST級數據視圖：包含組 2級數據視圖：包含的項目 ，但我不知道。

這是我試過的代碼，但它不起作用：所有項目（對於所有組）都顯示在組上方。 代碼：

Ext.define('MyApp.view.Main', { 
extend: 'Ext.navigation.View', 
xtype: 'main', 
requires: ['Ext.data.Store'], 
config: { 
    navigationBar : { 
     docked : 'top', 
     items : [ 
      { 
       name: 'btnHome', 
       align: 'left', 
       xtype: "button", 
       iconCls: 'home', 
       ui: 'plain' 
      } 
     ] 
    }, 
    items: [ 
     { 
      title: 'MyApp', 
      layout: 'vbox', 
      fullscreen: true, 
      items: [ 
       { 
        xtype: 'label', 
        html: 'some text...' 
       }, 
       { 
        xtype: 'dataview', 
        id: 'listMainNavViewGroups', 
        useSimpleItems: true, 
        grouped: true, 
        inline: { 
         wrap: true 
        }, 
        flex: 1, 
        itemTpl: [ 
         '<div>' + 
          '<div style="display: block; float: left; font-family: Pictos; font-size: 1.5em; line-height: 120%; margin: 0 20px 0 0;">{icon}</div>' + 
          '<span style="margin: 0 40px 0 0;">{group}</span>' + 
         '</div>' 
        ], 
        store: 'storeMainNavGroups', 
        items: [ 
         { 
          xtype: 'dataview', 
          id: 'listMainNavView', 
          useSimpleItems: true, 
          grouped: true, 
          height: '100px', 
          inline: { 
           wrap: false 
          }, 
          flex: 1, 
          itemTpl: [ 
           '<div>' + 
            '<div style="display: block; float: left; font-family: Pictos; font-size: 1.5em; line-height: 120%; margin: 0 20px 0 0;">{icon}</div>' + 
            '<span style="margin: 0 40px 0 0;">{title}</span>' + 
            '</div>' 
          ], 
          store: 'storeMainNav' 
         } 
        ] 


       } 
      ] 
     } 
    ] 
} 

}）;

我在做什麼錯？ 有沒有更好的解決方案來完成這個？

在此先感謝您的回答和建議。

Arnaud

Answer 1

這樣做會變得非常複雜。 Sencha不喜歡太多的嵌套。如果我要這樣做，我會做這樣的事情：

Ext.define('MyApp.view.Main', { 
     extend: 'Ext.navigation.View', 
     xtype: 'main', 
     requires: ['Ext.data.Store'], 
     config: { 
     navigationBar : { 
      docked : 'top', 
      items : [ 
      { 
      name: 'btnHome', 
      align: 'left', 
      xtype: "button", 
      iconCls: 'home', 
      ui: 'plain' 
      }] 
     }, 
     items: [ 
      { 
      xtype:'container', 
      title: 'MyApp', 
      layout: 'hbox',//Note change to hbox 
      fullscreen: true, 
      items:[ 
      { 
       xtype:'container', 
       layout:'vbox', 
       flex:1 
      }, 
      { 
       xtype:'container', 
       layout:'vbox', 
       flex:1 
      } 
      ] 
     ] 
    }, 
    groupNumber : 0, 
    initialize:function(){ 

     var me = this; 

     //Add items dynamically here 
     var leftPanel = this.getAt(0).getAt(0); 
     var rightPanel = this.getAt(0).getAt(1); 

     var groupStore = Ext.getStore('MainNavGroups');//This should be store id 
     var itemStore = Ext.getStore('MainNavItems'); 

     //Iterate through groups and add items to each 

     groupStore.each(function(record){ 

      var groupPanel = { xtype:'container', layout:'hbox', items:[]}; 

      itemStore.each(function(rec){ 
        //Add items to groupPanel here by filtering for group id 
        //groupPanel.add(...); 
      }); 

      if(me.groupNumber % 2 == 0){//Even number 
       leftPanel.add(groupPanel); 
      } 
      else{ 
       rightPanel.add(groupPanel); 
      } 

      me.groupNumber++; 
     }); 

     this.callParent(); 
    } 
});