Extjs grid panel自带滚动条失效的解决方法
更新时间：2014年09月11日 15:54:10 投稿：whsnow
对gridPanel中的stroe数据进行过滤，所以有时候总是导致gridPanel自身所带的scrollbar失效，好了，现在来说说怎么解决scrollbar失效
之前用EXTJS的gridPanel组件的时候，因为经常对gridPanel中的stroe数据进行过滤，所以有时候总是导致gridPanel自身所带的scrollbar失效。
取个实例，EXTJS gridPanel自带的滚动条，是有一个固定的列宽来放置这个scrollbar的，如上图所示。所以当这个scrollbar失效的时候，无论你怎么拖动这个滚动条，grid中的数据永远都不会随scrollbar的移动而展示相应区域的数据（换句话说就是你永远看到的数据都是截图中的这几条record）。
至于为什么gridpanel会失效？暂时也不清楚原因是什么。之前在Extjs的论坛和stackoverflow上都有人遇见类似的问题，但是版本可能是都是4.1之前的，Extjs的dev team说他们从4.1版本开始已经修复了这个问题（不确定，希望用过4.1版本的童鞋论证下）。
好了，现在来说说怎么解决scrollbar失效。
xtype: 'gridpanel',
// autoScroll:true,
scroll:false,
viewConfig: {
style: { overflow: 'auto', overflowX: 'hidden' }
}
可以看到，禁用了autoScroll这个属性，并且把scroll设置为false，然后设置viewConfig, 这里把横向的滚动条给禁用了，只保留纵向的滚动条。OK 问题解决，看看效果：
这时会发现滚动条没有了自己的固有列，而是和grid的最后一个列并在了一起，gridPanel自带的scrollbar就这样被禁用咯。
同时也解决了这个潜在的bug。
但是这种用法最好是将grid中的所有列都设置好固定的宽度，并且设置属性：
resizable:false
这样可以避免一些禁用横向滚动条带来的不必要麻烦。
相关文章
在ExtJS4中使用mixins来实现多继承，下面有个不错的示例，感兴趣的朋友可以参考下2013-12-12
这篇文章主要介绍了ExtJS中设置下拉列表框不可编辑的方法,需要的朋友可以参考下2014-05-05
要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载2009-04-04
常用Extjs工具:Extjs.util.Format使用方法
常用Extjs工具:Extjs.util.Format使用方法，需要的朋友可以参考下2012-03-03
关于viewport,Ext.panel和Ext.form.panel的关系
那个深入浅出ext作者比我还懒 viewport存放Ext.panel对象,其容器中的成员可以以borderlayout方式布局2009-05-05
很多时候，我们需要显示在grid中的数据不是短短的几条或者几十条，而是成千上万条。如果让大量的数据一股脑全都显示在一个页面中，可以想象会造成什么样的用户体验。2009-10-10
extjs为ColumnChart设置不同的颜色想必有很多朋友还是比较陌生的吧，接下来为大家详细介绍下具体设置代码，感兴趣的朋友可以参考下哈2013-05-05
本文接着上讲Extjs学习笔记之二 Extjs之Form介绍Extjs的表单。Extjs除了类似普通的html form的表单项之外，还有一些功能更为丰富实用的表单项。2010-01-01
ext combox 下拉框不出现自动提示,自动选中的解决方法
ext combox 如果想实现类似于 baidu 搜索时的提示功能。必须禁止其分页功能才可以。2010-02-02
在解决这个有很多优化方法，今天来说其中一种，那就是在Ant脚本打包的时候，把js中空格、注释去掉、以及合并，合并今天不说了，还未实现这个，在研究中2013-04-04
最新评论