关于从不同的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();
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();
相关文章推荐
- ext的Ext.data.JsonStore不自动获取数据的问题记录
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- var dataObj=eval("("+data+")");//转换为json对象(解决在ajax返回json格式数据的时候明明正确的获取了返回值但是却就是进不去success方法的问题。格式错误)
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- 关于extj4的Ext.data.JsonStore的问题
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- 关于获取页面元素的二进制数据并再次上传的问题的解决
- 关于AJAX请求JSON数据(解决responseText空的问题)
- 解决$GLOBALS["HTTP_RAW_POST_DATA"]获取不到数据的问题
- 解决$GLOBALS["HTTP_RAW_POST_DATA"]获取不到数据的问题
- Ext.data.JsonStore使用HttpProxy加载数据时传递参数的两种方法
- 解决EXT中Grid等组件读取Json数据的Date数据问题
- 解决Volley框架下JsonObjectRequest以POST提交数据,服务端无法获取数据的问题。
- 关于java中long类型的数据转换json传到前台时丢失精度问题的解决办法
- 如何把Ext.data.store里的数据一次性用JSON传给后台(添加了后台解析部分)