? ?? 最近flex3學了不少，想著開始復習之前學過的ext，著手做一兩個項目。我在EXT上停留的時間不短，對基本內容還是很清楚，對各種高級技法也有著應用，這次希望通過做項目來貫穿起來。

??? EXT中數據加載是一個細節問題，做不好會對web工程的效率影響很大，導致響應緩慢等問題。比如有這樣一個需求：在一個panel中，上半部分是班級學生列表，下半部分是是一個成績列表，當點擊一行學生記錄的時候，下面會加載該學生成績。

?? ??

?? ?這時候有兩種做法，一種是點擊的時候 發送一個AJAX請求到后臺，包含請求參數，如學生id之類。再通過DAO操作得到該學生成績列表然后返回在前臺顯示出來。還有一種做法，在學生列表加載的時候，成績列表也隨之加載，這樣當點擊學生行記錄時，不用查詢數據庫，而是在對應的subStore中load學生的成績list。

?? ? 經過實驗，我發現這兩個操作各有好壞：第一種應該適用于當subList中數據量很大的情況，這個時候用第二種顯然不好，將導致響應極為緩慢。但是如果子表中加載的數據量很小，只有不超過10條這樣的一個小數據量，那我們不妨使用第二種。但是這種做法不容易實現本地分頁，因為使用該做法的時候，點擊學生行記錄的時候下面的字表已經相當于加載一個本地數據，本地數據比較難實現分頁。

?? ? 以下代碼為使用第二種方法，調用DWR中的方法。

?

?? ? ? ? ? ? ? ? ? ? ? ?currentRow = null;

?

var recordType = Ext.data.Record.create([{

name : "id",

type : "int"

}, {

name : "name",

type : "string"

}, {

name : "num",

type : "int"

}, {

name : "leader",

type : "string"

}, {

name : "students"

}]);

?

var store = new Ext.data.Store({

proxy : new Ext.data.DWRProxy(ClassDAO.getData, true),

reader : new Ext.data.ListRangeReader({

totalProperty : 'totalSize',

id : 'id'

}, recordType),

remoteSort : true,

listeners : {

load : function(store, recs) {

if (recs.length > 0) {

grid.getSelectionModel().selectFirstRow();

substore.loadData(recs[0].data.students);

}

}

}

});

?

var substore = new Ext.data.JsonStore({

fields : [{

name : 'id'

}, {

name : 'name'

}, {

name : 'sex'

}, {

name : 'num'

}, {

name : 'clazz'

}]

?

});

?

var editor = new Ext.ux.grid.RowEditor({

saveText : '保存',

cancelText:"取消",

listeners:{

afteredit:function(e){

//alert(grid.getTopToolbar().get("text").getValue());

//grid.getTopToolbar().get("text").reset();

alert(e.record.data.id*e.record.data.num);

}

}

});

?

var grid = new Ext.grid.GridPanel({

store : store,

width:400,

region : 'center',

loadMask : true,

view:new Ext.grid.GridView({

?? ? ? ? ? ? markDirty: false

?? ? ? ? }),

plugins:[editor],

tbar : new Ext.Toolbar({

?

items : [{

xtype : "button",

text : "編輯",

iconCls : "edit"

},{

xtype : "button",

text : "驗證",

iconCls : "edit",

listeners:{

"click":function(){

var recs = store.getModifiedRecords();

//alert(recs.length);

for(var i=0;i<recs.length;i++){

//alert(recs[i].data.name);

}

}

}

},{

xtype:"textfield",

id:"text",

inputType:"text",

value:"sss"

}]

}),

bbar : new Ext.PagingToolbar({

store : store,

pageSize : 4,

displayInfo : true,

displayMsg : '顯示第 {0} - {1} 條記錄，總共 {2}條',

emptyMsg : "沒有相關記錄"

}),

columns : [new Ext.grid.RowNumberer(),{

? ? ? ?id: 'name',

header : "班級名",

width : 100,

sortable : false,

dataIndex : 'name',

editor:{

xtype: 'textfield',

?? ? ? ? ? ? ? allowBlank: false

}

}, {

header : "班級人數",

width : 150,

sortable : false,

dataIndex : 'num',

editor:{

xtype: 'numberfield',

?? ? ? ? ? ? ? allowBlank: false,

?? ? ? ? ? ? ? minValue:1,

?? ? ? ? ? ? ? maxValue:30

}

}, {

header : "班主任",

width : 150,

sortable : false,

dataIndex : 'leader',

editor:{

xtype: 'textfield',

?? ? ? ? ? ? ? allowBlank: false

?? ? ? ? ? ? ? /*regex:/^[\u4e00-\u9fa5]{2,}$/,

?? ? ? ? ? ? ? regexText:"請輸入中文字符"*/

}

}],

listeners : {

rowclick : function(grid, rowIndex, e) {

var rec = store.getAt(rowIndex);

if (rec) {

substore.loadData(rec.data.students);

}

}

}

});

?

var subGrid = new Ext.grid.GridPanel({

store : substore,

loadMask : true,

title : '班級學生明細',

frame : true,

region : 'south',

layout : 'fit',

split : true,

height : 150,

minSize : 175,

maxSize : 400,

columns : [{

header : "姓名",

width : 100,

sortable : false,

dataIndex : 'name'

}, {

header : "性別",

width : 150,

sortable : false,

dataIndex : 'sex'

}, {

header : "學號",

width : 200,

sortable : false,

dataIndex : 'num',

align : 'right'

}],

listeners : {

rowclick : function(grid, rowIndex, e) {

var rec = substore.getAt(rowIndex);

if (rec) {

alert(rec.data.clazz.students.length);

}

}

}

});

?

new Ext.Panel({

width : 400,

height:380,

layout : "border",

frame : true,

items : [grid, subGrid],

renderTo : "form2"

});

?

store.load({

params : {

start : 0,

limit : 4

}

});

????

?

EXT數據加載的問題