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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
AngularJS表单验证功能
Oct 19 Javascript
详解jenkins自动化部署vue
May 14 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
js new Date()实例测试
Oct 31 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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
PHP实现Socket服务器的代码
2008/04/03 PHP
cookie中的path与domain属性详解
2013/12/18 Javascript
Jquery性能优化详解
2014/05/15 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python中if有多个条件处理方法
2020/02/26 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
简单的项目建议书模板
2014/03/12 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
连锁超市项目计划书
2014/09/15 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
个人合伙协议书范本
2014/10/14 职场文书
合作意向协议书
2015/01/29 职场文书
校运会通讯稿
2015/07/18 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技