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

最近在开发一个后台的抽奖程序,用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();




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值