extJS 5.0은 탭 선택에 따라 다른 저장소를 바인드합니다.

Question

선택한 탭을 기반으로 다른 데이터 저장소의 데이터를 동적으로로드하는 방법에 대한 조언을 찾고 있습니다.

두 저장소는 모두 동일한 열 이름을 사용하므로 dataIndex로드는 변경하지 않아야합니다.

은 "완료"탭 내가

샘플 "완료"가게를 결합하고자 선택한 경우 "현재"탭 내가 "현재"가게

을 결합하고자 선택하면

viewModel: { 
    formulas: { 
       activeStore: function(get) { 
        var active = get('active'); 
        return this.getStore(active == 'aTab' ? 'a' : 'b'); 
       }   
    }, 
    data: { 
     active: 'aTab' 
    }, 
    stores: { 
     a: 'Change', 
     b: 'ChangeArchive', 
    } 
}, 
{ 
      xtype: 'tabpanel', 
      id: 'changetabs', 
      tabBarHeaderPosition: 1, 
      headerPosition: 'top', 
      plain: true, 
      width: 480, 
      height: 30, 
      items: [{ 
       title: 'Current', 
       itemId: 'aTab' 
       }, 
       { 
       title: 'Completed', 
       itemId: 'bTab' 
       } 
      ], 
      listeners: { 
       tabchange: function(tabPanel, newTab) { 
        tabPanel.ownerCt.getViewModel().set('active', newTab.getItemId()); 
       } 
      } 
}, 

그리고 그리드

{ 
    region: 'west', 
    xtype: 'grid', 
    bind: {store: '{activeStore}'}, 
    viewConfig: { 
     markDirty: false 
    }, 
    id: 'ActionList', 
    columns: { 
     items: [ 
      { text: 'Action', dataIndex: 'action_id', width: 300}, 
      { text: 'Status', dataIndex: 'status', width: 180}, 
     ] 
    }, 
    listeners: { 
     select: 'onSelectAction' 
    } 
} 

Answer 1

요 : 내 코드의 다음과 같습니다 수식을 사용하여해야합니다 :

Ext.define('Foo', { 
    extend: 'Ext.data.Model' 
}); 

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     new Ext.container.Viewport({ 
      layout: 'border', 
      viewModel: { 
       formulas: { 
        activeStore: function(get) { 
         var active = get('active'); 
         return this.getStore(active == 'aTab' ? 'a' : 'b'); 
        } 
       }, 
       data: { 
        active: 'aTab' 
       }, 
       stores: { 
        a: { 
         model: 'Foo', 
         data: [{ 
          foo: 1 
         }] 
        }, 
        b: { 
         model: 'Foo', 
         data: [{ 
          foo: 2 
         }] 
        } 
       } 
      }, 
      items: [{ 
       region: 'west', 
       xtype: 'grid', 
       width: 200, 
       bind: '{activeStore}', 
       columns: [{ 
        dataIndex: 'foo' 
       }] 
      }, { 
       region: 'center', 
       xtype: 'tabpanel', 
       items: [{ 
        title: 'A', 
        itemId: 'aTab' 
       }, { 
        title: 'B', 
        itemId: 'bTab' 
       }], 
       listeners: { 
        tabchange: function(tabPanel, newTab) { 
         tabPanel.ownerCt.getViewModel().set('active', newTab.getItemId()); 
        } 
       } 
      }] 
     }); 
    } 
}); 

Fiddle.