Extjs让Gridpanel组件自动滚屏

     刚学习了Ext的开发框架，发现这个东西还是挺不错的。

     后来公司让改变一个Gridpanel的展现方式，要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久，也没有找到框架的相应控制方法，然后在网上找了很久，也没有找到有人给去示例，无奈就只能自己写JS来控制了。为了给大家提供方便，这里我把我的探索结果发出来供大家借鉴参考。

    首先我去找到了Ext控制Gridpanel滚动条的方式，使用scrollBy

   scrollBy的文档是这样说明的：

scrollBy( Number/Number[]/Object deltaX, Number/Boolean/Object deltaY, Boolean/Object animate )

滚动组件target element 的元素由传入三角点，选择动画。

之后就是怎么样通过JS来控制他的自动滚屏了。

滚屏就要去获取当前Gridpanel里面内容的高度，如果高度小于当前容器的高度就不用滚屏了，相反，如果溢出就进行滚屏。

但是翻了api文档老半天也没有找到可以获取内容高度的方法，于是，我使用了debugger去查看组件的各个参数，果然，他有个属性记录了当前内容的高度

me.getView().getEl().el.lastBox.contentHeight;//me指的是当前的Gridpanel

然后获取了当前容器的高度

me.getView().getHeight();

但是，溢出之后要怎么样才能实现滚屏呢？这里可能根据自己的控制方法不一样，可以写出不一样的控制方式。

而我采用的是将查询结果复制拼接在当前的查询结果之后，这就产生了两片一样的内容(|A1|A2|)，我控制的方式是初始化之后自动追加记录并让它自动向下滚动，当第一片记录的底部滚动到当前panel的顶部之后(A1|A2|  )刷新当前内容，这样就重新的使得内容的构成变成了初始化状态(|A1|A2|)，这样我们就可以看到一个滚屏的错觉了。

添加重复记录到当前记录尾部的办法如下：

obj.each(function(record){//obj是当前的store，records是store里面的记录
	var re = record;
	var newrecord = record.data;
	delete newrecord.id;//追加的记录把'id'这个属性去掉，否则会使得事件失效
	newrecord.data=record.data;
	obj.add(newrecord);
});

这里面存在这一个问题，就是当我们的记录里面含有‘id’这个字段的时候，如果你追加上去的记录没有把id去掉，会使得js控制的事件失效，不相信你们可以去试试看，如果没有id 应该obj.add(records)就可以了吧，我没有试过，你们可以尝试看看。

滚动的控制代码使用：

me.getView().scrollBy(0,1);//滚动条向下移动一个像素

这里还要使用到setInterval、clearInterval，这两个方法来控制频率，具体的使用方法在W3C的文档中有介绍，大家可以去查阅。

这样，让Gridpanel自动滚屏就没有太大的障碍了。自己去设置一些标记来记录和控制就很好让它自动滚动起来了。我的实现方式如下，大家可以参考，

主要控制写在了store的load方法上了：

me.store = Ext.create('Ext.data.Store', {
			remoteSort : true,
			remoteFilter : true,
			autoLoad : true,
			autoSync : false,
			storeId : 'nstore',
			model : 'App.model.BoardInfo',
			proxy : {
				type : 'rest',
				format : 'json',
				url : *********,//你请求数据的json连接
				extraParams : params,
				reader : {
					type : 'json',
					root : 'records'
				},
				writer : {
					type : 'json'
				}
			},
			listeners:{
				load : function(obj, records, successful, eOpts) {
					var size = records.length;
					var tableHeight = me.getView().getHeight();
					var contentHeight = me.getView().getEl().el.lastBox.contentHeight;
					
					if(contentHeight > tableHeight){//当内容的行高大于表格的行高，即显示内容溢出的时候设置自动滚屏
						obj.each(function(record){
							var re = record;
							var newrecord = record.data;
							delete newrecord.id;//追加的记录把'id'这个属性去掉，否则会使得事件失效
							newrecord.data=record.data;
							obj.add(newrecord);
						});
						var topHeight = 0;
						function focusChange(){
							if(topHeight+1 < contentHeight){//topHeight+1减小时间上的误差产生的跳动
								me.getView().scrollBy(0,1);
								topHeight++;
							}
							else{
								me.getView().refresh();
								topHeight=0;
							}
						}
						if(!me.isReload){//这个标记是因为这块代码有自动刷新的控制，如果有自动reload又没有判断是不是更新了，你会发现你的滚屏速度会越来越快
							me.isReload=true;
							var noticeMar = setInterval(focusChange, 100);
							me.addListener('itemmouseenter',function(){
								clearInterval(noticeMar);
							});
							
							me.addListener('itemmouseleave',function(){
								noticeMar = setInterval(focusChange, 100);
							});
						}
					}
				}
			}
 });

大概介绍到这里，如果你想要实现Gridpanel的自动滚屏效果应该就没什么难度了。

滚动效果如附件图片所示：