
需要实现一个 如图所示 的效果,程序是通过for 循环 创建的 不同 grid 表格对象,同一个action 通过传递回不同 的 作业区编码 来读取不同的数据。
最开始 将 每一个 grid 的 store 独立出来,将 grid 和 分页工具条的store 指定为独立出来的哪个 store。但是结果是有多个grid的内容是一样的,分页工具条的条数全部是一样的。
后来思考了下,在每个grid 的store属性直接动态生成,然后到分页工具条里边通过读取store 的id 来获取该store。
这样的结果是分页工具条的store没有读取到,因为在 分页工具条 store 在获取 grid story 的时候,该组建并没有被构建完成,查找只说也就无从找起了。
通过的思路 又找到了一种解决方案,那就是在 工具条组建加载完成时 出发的 事件 中,去更改其store 为 grid 的store。
上面的 方法还没有 完成的时候就找到最终解决方案了:首先定义一个全局的 store 并创建它,指定grid 和 工具条的store 为 全局store名称,最后在 工具条 加载完成 事件中 ,调用 工具条 的分页方法即可,根据 javascript 闭包 原则,当前的 全局 store 绝对是我们想要的哪个!
function CreateStore(zyqid) {
	var s = Ext.getCmp("store" + zyqid);
	if (typeof(s) == "undefined") {
		return new Ext.data.Store({
					id : "store" + zyqid,
					// autoLoad : true,
					reader : listreader,
					proxy : new Ext.data.HttpProxy({
						url : "zyxx/zyqmessage.action"// ?zyqbm=" + zyqid
							// method : 'post'
						})
				});
	} else {
		return s;
	}
}
var _store = CreateStore(zyqid);//创建store 方法
	var listgrid = new Ext.grid.GridPanel({
				// store : zyxxstore,
				id : "grid" + zyqid,
				// store : st = CreateStore(zyqid), // 这里 动态创建一个store
				store : _store,
				cm : colmodel,
				columnLines : true,
				// title : zyqid,
				listeners : {
					'afterrender' : function(i) {
						// var tb = Ext.getCmp("toolbar"+zyqid);
						// alert(this.store);
						// _store.reload();
						var elments = Ext.select(".x-grid3-header");// .x-grid3-hd
						elments.each(function(el) {
									el.setStyle("background-color", '#CBBC82');// 设置不同的颜色
									el.setStyle("background-image", 'none');
								}, this);
					}
				},
				bbar : new Ext.PagingToolbar({
							pageSize : 10,
							id : "toolbar" + zyqid,
							// store : CreateStore(zyqid),
							store : _store,
							displayInfo : true,
							displayMsg : '显示第{0}条至{1}条,共{2}条',
							emtyMsg : '没有记录',
							listeners : {
								'afterrender' : function(i) {
									// this.store.reload();
									this.doLoad(0);//在这里调用 工具条 store 加载
								}
							},
							doLoad : function(start) {
								// alert(start);
								sqgrid_start = start;
								// 改变全局变量的值
								var para = {};
								var pn = this.store.paramNames;
								para[pn.start] = start;
								para[pn.limit] = this.pageSize;
								para['zyqbm'] = zyqid;
								this.store.load({
											params : para
										});
							}
						}),
				viewConfig : {
					forceFit : true,
					scrollOffset : 0
				}
			});
                  
                  
                  
                  
                            
本文介绍了一种使用ExtJS框架优化多Grid表分页的方法,通过全局Store与工具栏加载完成事件结合,解决了数据重复及分页不准确的问题。
          
      
          
                
                
                
                
              
                
                
                
                
                
              
                
                
              
            
                  
					968
					
被折叠的  条评论
		 为什么被折叠?
		 
		 
		
    
  
    
  
            


            