? ?? 最近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
}
});
?????
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
