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"저장소에 저장되며 그룹은 ... "그룹"으로 그룹화됩니다!

나는이 계단식 dataviews에 의해 수행되어야한다고 믿는다 1rst 수준 DataView를이 : 그룹에게 2 수준 Dataviews가 포함 항목 를 포함하지만 난 모르겠어요.

이것은 시도했지만 작동하지 않는 코드입니다. 모든 항목 (모든 그룹)이 그룹 위에 표시됩니다. 코드 :

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


       } 
      ] 
     } 
    ] 
} 

});

내가 뭘 잘못하고 있니? 더 좋은 해결책이 있습니까?

답변과 조언에 미리 감사드립니다.

아르노

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