ExtJS 4 在一個Grid中讀取兩個store

 

徐啓洋在其中幾個column用store，剩下的用另一個store。

 

參考： http://stackoverflow.com/questions/6291831/extjs-4-show-data-from-multiple-stores-in-grid

參考下方一個答案。

利用render以及共同欄位值完成。

 

實作範例：

 

Ext.define('User', {

extend: 'Ext.data.Model',

idProperty :'idNo',

fields: [

{name: 'idNo', type: 'string'},

{name: 'name', type: 'string'},

{name: 'sex', type: 'string'}

]

});

 

var store1 = Ext.create('Ext.data.Store', {

model: 'User',

data : [

{"idNo":"A123", "name":"QWE"},

{"idNo":"B456", "name":"ASD"},

{"idNo":"C789", "name":"ZXC"}

]

});

 

var store2 = Ext.create('Ext.data.Store', {

model: 'User',

data : [

{"idNo":"A123", "sex":"男"},

{"idNo":"B456", "sex":"男"},

{"idNo":"C789", "sex":"男"}

]

});

 

var renderSex = function(value) {

var rec = store2.getById(value);

return rec ? rec.get('sex') : '';

};

 

Ext.define('Tax.view.base.personTestList', {

extend: 'Ext.grid.Panel',

alias: 'widget.personTestList',

frame: true,

store: store1,

columns: [

{text: "身分證號", width: 100, sortable: true, dataIndex: 'idNo', align: "center"},

{text: "人員姓名", width: 180, sortable: true, dataIndex: 'name'},

{text: "性別", width: 180, sortable: true, dataIndex: 'idNo', renderer: renderSex}

],

columnLines: true

});