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

});