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