最近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
}
});
