Extjs6 实现根据查询框查询,选中所要查询的行,并且滚动条定位到选中行。

实现效果大致这样,通过底部的查询框,输入名称,
之后竖向滚动条定位到指定位置。(类似ctrl + f)的功能。
在这里插入图片描述
大致的思路是:
1、通过store里面的records数据判断是否有相同的仓库,
如果相同就选中这一行。
2、获取整个竖向滚动条的高度,根据查询出来的数量,
计算出每条数据在竖向滚动条所站的高度是多少,移动了多少。
3、最后设置滚动条的高度位置。

下面贴上代码:

this.quicksearchtext = new Ext.form.TextField({
					//name : 'seText',
					emptyText : '按完整的仓库编码/仓库名称定位(Enter键)',
					width: 350,
					//anchor: '100%',
					triggers : {
						search: {
				            weight: 1,
				            cls: Ext.baseCSSPrefix + 'form-search-trigger',
				            handler: function(){
				            	_this.controller.quicksearch(this);
				            },
				            scope: 'this'
				        }
					},
					//layout:'fit',
					//region:'center',
					listeners : {
						specialkey: function(field, e){
							if (e.getKey() == e.ENTER) {
								_this.controller.quicksearch(field,e);
							}
						}
					}

				});	
//查询处理函数
quicksearch : function(me){
		var _this = this;
		var text = _this.view.quicksearchtext.getValue();
	
//store的数量,即是网格grid的数量	
var len = _this.view.warehousegrid.normalGrid.store.data.items.length;
		var itemRow = _this.view.warehousegrid.normalGrid.store.data.items;
		//滚动条总高度
		var size = _this.view.warehousegrid.getScrollable()._size.y;
		//计算每行的偏移量
		var rowSize = size/len;
		var distance;
		for(var j = 0; j < len; j++){
			if(itemRow[j].data.warehouse_code == text || 
				itemRow[j].data.warehouse_name == text){
				//选中查询行
				_this.view.warehousegrid.setSelection(itemc[j]);
				//计算选中行的偏移量
				distance = rowSize * j;
			}
		}
		if(distance){
			//设置滚动条的偏移量
			_this.view.warehousegrid.scrollBody.dom.scrollTop = distance;
		}
}

参考链接:
参考链接1
参考链接2

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

燕長亭

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值