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
这样可以避免一些禁用横向滚动条带来的不必要麻烦。
相关文章
其实这一个总是很容易解决，只要在Ext.onReady()方法之前（或者方法的第一句）加上下面这一句代码就解决了！2010-12-12
ExtJS中窗口是由Ext.Window类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。2011-01-01
ExtJs GridPanel中实现增删改效果的代码，需要的朋友可以参考下。2010-08-08
Extjs3.0 checkboxGroup 动态添加item实现思路
Extjs3.0中的CheckboxGroup默认不能动态添加item,如需要数据动态创建，试着创建整个CheckboxGroup，而不是动态添加item，具体实现如下，感兴趣的朋友可以了解下2013-08-08
多人都习惯在渲染子组件的时候将Gird渲染到容器内的一个div里，为什么那么多人喜欢使用这种方式来添加子组件呢，下面为大家详细介绍下2013-06-06
form恐怕是Web开发中最常用的控件了，Extjs对普通的html form进行了一些封装，使其具有基本的外观和一些简便的和服务器进行通信的方法。2010-01-01
ExtJS 访问容器对象使用说明，需要的朋友可以参考下。2009-10-10
Extjs组件的定义在网上看到了一个实例，于是拷了下来留着以后用，现在把它晒出来与大家一起分享，感兴趣的各位可不要错过了哈2013-06-06
最近学ajax，接触到了Extjs这个强大的框架。我想通过我的学习笔记，最后可以让大家上手在项目中使用Ext。首先我会写一些基本的用于入门Ext的文章，打好基础是很重要的。2008-12-12
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Extjs的组件有两个看起来类似的配置项，applyTo和renderTo，这两个配置项都是用来指定将该extjs组件加载到什么位置。那他们到底有什么区别呢，网上搜了下，有两篇博文也是关于这个的。2010-01-01
最新评论