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

編輯歷史

時間 作者 版本
2016-01-06 05:47 – 05:50 徐啓洋 r1 – r39
顯示 diff
- Untitled
+ ExtJS 4 在一個Grid中讀取兩個store
- This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
+ 在其中幾個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
+ });
2016-01-06 05:47 (unknown) r0
顯示 diff
+ Untitled
+ This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!