? ?? 最近flex3學(xué)了不少，想著開(kāi)始復(fù)習(xí)之前學(xué)過(guò)的ext，著手做一兩個(gè)項(xiàng)目。我在EXT上停留的時(shí)間不短，對(duì)基本內(nèi)容還是很清楚，對(duì)各種高級(jí)技法也有著應(yīng)用，這次希望通過(guò)做項(xiàng)目來(lái)貫穿起來(lái)。
??? EXT中數(shù)據(jù)加載是一個(gè)細(xì)節(jié)問(wèn)題，做不好會(huì)對(duì)web工程的效率影響很大，導(dǎo)致響應(yīng)緩慢等問(wèn)題。比如有這樣一個(gè)需求：在一個(gè)panel中，上半部分是班級(jí)學(xué)生列表，下半部分是是一個(gè)成績(jī)列表，當(dāng)點(diǎn)擊一行學(xué)生記錄的時(shí)候，下面會(huì)加載該學(xué)生成績(jī)。
?? ??
?? ?這時(shí)候有兩種做法，一種是點(diǎn)擊的時(shí)候 發(fā)送一個(gè)AJAX請(qǐng)求到后臺(tái)，包含請(qǐng)求參數(shù)，如學(xué)生id之類(lèi)。再通過(guò)DAO操作得到該學(xué)生成績(jī)列表然后返回在前臺(tái)顯示出來(lái)。還有一種做法，在學(xué)生列表加載的時(shí)候，成績(jī)列表也隨之加載，這樣當(dāng)點(diǎn)擊學(xué)生行記錄時(shí)，不用查詢(xún)數(shù)據(jù)庫(kù)，而是在對(duì)應(yīng)的subStore中l(wèi)oad學(xué)生的成績(jī)list。
?? ? 經(jīng)過(guò)實(shí)驗(yàn)，我發(fā)現(xiàn)這兩個(gè)操作各有好壞：第一種應(yīng)該適用于當(dāng)subList中數(shù)據(jù)量很大的情況，這個(gè)時(shí)候用第二種顯然不好，將導(dǎo)致響應(yīng)極為緩慢。但是如果子表中加載的數(shù)據(jù)量很小，只有不超過(guò)10條這樣的一個(gè)小數(shù)據(jù)量，那我們不妨使用第二種。但是這種做法不容易實(shí)現(xiàn)本地分頁(yè)，因?yàn)槭褂迷撟龇ǖ臅r(shí)候，點(diǎn)擊學(xué)生行記錄的時(shí)候下面的字表已經(jīng)相當(dāng)于加載一個(gè)本地?cái)?shù)據(jù)，本地?cái)?shù)據(jù)比較難實(shí)現(xiàn)分頁(yè)。
?? ? 以下代碼為使用第二種方法，調(diào)用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 : "驗(yàn)證",
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 : "沒(méi)有相關(guān)記錄"
}),
columns : [new Ext.grid.RowNumberer(),{
? ? ? ?id: 'name',
header : "班級(jí)名",
width : 100,
sortable : false,
dataIndex : 'name',
editor:{
xtype: 'textfield',
?? ? ? ? ? ? ? allowBlank: false
}
}, {
header : "班級(jí)人數(shù)",
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:"請(qǐng)輸入中文字符"*/
}
}],
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 : '班級(jí)學(xué)生明細(xì)',
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 : "學(xué)號(hào)",
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
}
});
?????
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
