Extjs grid panel自带滚动条失效的解决方法


Posted in Javascript onSeptember 11, 2014

之前用EXTJS的gridPanel组件的时候,因为经常对gridPanel中的stroe数据进行过滤,所以有时候总是导致gridPanel自身所带的scrollbar失效。

Extjs grid panel自带滚动条失效的解决方法

取个实例,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 问题解决,看看效果:

Extjs grid panel自带滚动条失效的解决方法

这时会发现滚动条没有了自己的固有列,而是和grid的最后一个列并在了一起,gridPanel自带的scrollbar就这样被禁用咯。

同时也解决了这个潜在的bug。

但是这种用法最好是将grid中的所有列都设置好固定的宽度,并且设置属性:

resizable:false

这样可以避免一些禁用横向滚动条带来的不必要麻烦。

Javascript 相关文章推荐
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
用js传递value默认值的示例代码
Sep 11 #Javascript
js图片实时加载提供网页打开速度
Sep 11 #Javascript
jQuery 复合选择器应用的几个例子
Sep 11 #Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 #Javascript
sogou地图API用法实例教程
Sep 11 #Javascript
当前流行的JavaScript代码风格指南
Sep 10 #Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 #Javascript
You might like
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
教大家制作简单的php日历
2015/11/17 PHP
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
13个PHP函数超实用
2015/10/21 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Python 错误和异常代码详解
2018/01/29 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
教师自荐书
2013/10/08 职场文书
工作个人的自我评价
2014/01/14 职场文书
协议书与合同的区别
2014/04/18 职场文书
清明节寄语2015
2015/03/23 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书