您的位置:首页 > Web前端 > JavaScript

关于从不同的URL获取JSON数据时Ext.data.Store反映迟缓问题的解决

2011-07-20 10:19 1261 查看
最近在开发一个后台的抽奖程序,用Ext.data.Store获得JSON类型的数据,然后使用Ext.grid.GridPanel进行显示。因为是先显示了所有的待抽奖人信息,再显示抽中人员的信息。而两次store获得的数据时不同的,即URL指向不同,于是我使用了一下的ExtJS代码:
Ext.onReady(function() {
var information_store = new Ext.data.Store( {
url : '/module/dati/admin/backend/listRegister.jsp?group=1',
reader : new Ext.data.JsonReader( {
root : 'rows',
id : 'id'
}, [ 'id', 'name', 'identificationid', 'mobilephone', 'department',
'address', 'zipcode', 'ip', 'registertime', 'email' ])
});
//var cm = new Ext.grid.ColumnModel([])
var grid = new Ext.grid.GridPanel( {
applyTo:'showGrid',
id:'grid',
frame : true,
height : 480,
store : information_store,
stripeRows : true,
autoScroll : true,
loadMask : true,
viewConfig:{
autoFill:true
},
columns : [
new Ext.grid.RowNumberer()
,
{
header : "id",
dataIndex : 'id',
sortable: true
}, {
header : "姓名",
dataIndex : 'name',
sortable: true
}, {
header : "身份证号",
dataIndex : 'identificationid',
sortable: true
}, {
header : "手机号码",
dataIndex : 'mobilephone',
sortable: true
}, {
header : "单位",
dataIndex : 'department',
sortable: true
}, {
header : "通讯地址",
dataIndex : 'address',
sortable: true
}, {
header : "邮政编码",
dataIndex : 'zipcode',
sortable: true
}, {
header : "ip地址",
dataIndex : 'ip',
sortable: true
}, {
header : "注册时间",
dataIndex : 'registertime',
sortable: true
}, {
header : "email",
dataIndex : 'email',
sortable: true
} ]
});
information_store.load();
Ext.get("choujiang").addListener("click",function(){
/*var progressBar = new Ext.ProgressBar({
text:'正在抽奖,请稍后……',
width:300,
applyTo:'choujiang'
});
var count=0;
var percentage=0;
var progressText ='';
Ext.TaskMgr.start({
run:function(){
count++;
if(count>10){
progressBar.hide();
}
percentage = count/10;
progressText = percentage*100+'%';
progressBar.updateProgress(percentage,progressText);
},
interval:1000
});*/
information_store.removeAll();
information_store.proxy.setUrl('/module/dati/admin/backend/choujiang.jsp',true);
information_store.reload();
//Ext.get("daochu").insertHtml("<input type=\"button\" id=\"daochuButton\"/>");
});
Ext.get("daochuButton").addListener("click",function(){
//Publicjs.extGridToExcel(grid,"中奖名单");
var gridId='grid';
var sheetName='中奖名单';
try{
if(Ext.getCmp(gridId)){
/********************************************* grid 生成 Excel ***************************************/
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;

var grid = Ext.getCmp(gridId);
var store = grid.getStore();
var recordCount = store.getCount(); //行记录个数
var view = grid.getView();
var cm = grid.getColumnModel();
var colCount = cm.getColumnCount(); //列字段个数
var temp_obj = [];
//取得有各列字段的标题
for(var i = 0; i < colCount;i++){
if(cm.isHidden(i)){ //隐藏字段的理解:是指不在GridPanel里显示的标题,在这里不存在

}else{
temp_obj.push(i);
}
}
//输出标题
for(var i = 1; i <= temp_obj.length;i++){

oSheet.Cells(1,i).value = cm.getColumnHeader(temp_obj[i - 1]);
}

for(var i = 1 ; i <= recordCount; i++){
for(var j = 1; j<= temp_obj.length; j++){
if(j==4)
{
oSheet.Cells(i+1,j).NumberFormatLocal = "@";
}
oSheet.Cells(i+1,j).value = view.getCell(i-1,temp_obj[j-1]).innerText;
}
}
if(sheetName){
oSheet.Name = sheetName;
}

//Excel.Range excelRange = oSheet.getRange(oSheet.Cells(1,1),oSheet.Cells(recordCount+1,temp_obj.length));
//Range(oSheet.Cells(1,1),oSheet.Cells(recordCount+1,temp_obj.length)).EntireColumn.AutoFit();
/*oSheet.Columns("D").ColumnWidth = 150;
oSheet.Columns("E").ColumnWidth = 100;
oSheet.Columns("F").ColumnWidth = 300;
oSheet.Columns("G").ColumnWidth = 300;
oSheet.Columns("I").ColumnWidth = 120;
oSheet.Columns("J").ColumnWidth = 160;*/
oSheet.Columns("A:K").AutoFit;
oXL.UserControl = true;
oXL.Visible = true;
}else{
Ext.Msg.alert('Error','明细数据grid没有创建成功!');
return;
}
}catch(e){
if(Ext){
Ext.Msg.show({
title:'提示',
msg:'请设置IE的菜单\'工具\'->Internet选项->安全->自定义级别->\'对未标记为可安全执行脚本ActiveX控件初始化并执行脚本\'->选择[启用]  就可以生成Excel',
buttons:Ext.Msg.OK,
icon:Ext.Msg.INFO
});
}else{
alert('不支持ExtJs框架');
return;
}
}
});
});
如果没有在store重新reload前清空store里的数据,那么当你点击抽奖按钮时,会延时5-10秒,好像这段时间里没有执行click事件一样。所以,在这里一定要先清空store再重新载入数据。information_store.removeAll();
information_store.proxy.setUrl('/module/dati/admin/backend/choujiang.jsp',true);
information_store.reload();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐