ExtJS grid中带查询参数的自动翻页控件

          近来写前端ExtJs代码时,出现了这样一个问题,之前做的grid查询数据少,未对其grid进行翻页,假如数据较多,grid需要翻页显示时,按条件查询出的结果就不能正常的按页显示,而出现了当使用grid自带的翻页按钮时,第二页回重置查询条件,使得查询条件无效化,针对这种情况,本人在网上找到一些方法,这里选取了其中一种较为比较简便的方法,如下

          先列出grid的自带翻页控件

bbar : [{
					xtype : 'paging',
					pageSize : 20,
					store : exampleStore,
					displayInfo : true,
					displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
					emptyMsg : "没有记录"
				}]


这里将每页数量定为20,然后列出store

var exampleStore = new Ext.data.JsonStore({
		proxy : new Ext.data.HttpProxy({
					url : ‘...'
				}),
		root : 'list',
		totalProperty : 'totalProperty',
		fields : []
			// autoLoad : false
	});

	exampleStore.load({
				params : {
					start : 0,
					limit : 20
				}
			});

查询时的function

		buttons : [{
			text : '查询',
			iconCls : 'icon-accept',
			cls : 'right-part',
			handler : function() {
				exampleStore.proxy = new Ext.data.HttpProxy({
							url : 'employmentselfApply_selectEmploymentSelf.action'
						});
				exampleStore.load({
					params : {
						start : 0,
						limit : 20,
						'name' : Ext.getCmp('name').getValue(),
						'year' : Ext.getCmp('year').getValue(),
						'department' : Ext.getCmp('department').getValue(),
						'major' : Ext.getCmp('major').getValue()

					}
				});
			}
		}, '-', {
			text : '重置',
			iconCls : 'icon-reset',
			handler : function() {
				selectForm.form.reset();
			},
			cls : 'right-part'// ,
		}]

这里查询条件有name,year,department和major

 

方法是,加上下段代码

	exampleStore.on('beforeload',function(){ 
		exampleStore.baseParams = {
				'name' : Ext.getCmp('name').getValue(),
				'year' : Ext.getCmp('year').getValue(),
				'department' : Ext.getCmp('department').getValue(),
				'major' : Ext.getCmp('major').getValue()
		}
	});

此段代码表示的意思是,在store每次加载之前,执行下面一个方法,即赋值基本参数,这些参数将以隐藏的方式传到后台,这样的话,就能实现带参数的自动翻页功能了,但是要注意的是,此段代码必须写在查询代码之后,否则,会报找不到对象的错,因为Ext.getCmp中的值必须要先进行定义。


 


 

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值