首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

EXT数据加载的有关问题

2012-11-09 
EXT数据加载的问题??? 最近flex3学了不少,想着开始复习之前学过的ext,着手做一两个项目。我在EXT上停留的时

EXT数据加载的问题

??? 最近flex3学了不少,想着开始复习之前学过的ext,着手做一两个项目。我在EXT上停留的时间不短,对基本内容还是很清楚,对各种高级技法也有着应用,这次希望通过做项目来贯穿起来。


??? EXT中数据加载是一个细节问题,做不好会对web工程的效率影响很大,导致响应缓慢等问题。比如有这样一个需求:在一个panel中,上半部分是班级学生列表,下半部分是是一个成绩列表,当点击一行学生记录的时候,下面会加载该学生成绩。

?? ??EXT数据加载的有关问题

?? ?这时候有两种做法,一种是点击的时候 发送一个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

}

});

????

?

热点排行