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