Extjs 指定 grid 和 分页工具条的 store

本文介绍了一种使用ExtJS框架优化多Grid表分页的方法,通过全局Store与工具栏加载完成事件结合,解决了数据重复及分页不准确的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需要实现一个 如图所示 的效果,程序是通过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
				}

			});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值