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

之前用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

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

赞 (0)

相关推荐

  • ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码. 1.1.1 Grid组件 1.1.2 HTML代码 从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域). 其中grid-body包含了许多tr元素,每一个tr都是代表Gri

  • EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题

    遇到一个很奇怪的问题,ExtJs里的form提交创建的时候从session里取了个操作员的ID,然后在form里添加了一个xtype为hidden的组件,给它写了个value,奇怪的就出现了,在其中的一条机器上做是没有问题,换了一个机器,说什么就是不能赋值上去,搞的我老郁闷了.用了一个方法解决了此问题,但是老是感觉这样解决了很不爽,各位有没有遇到过这种问题,请指点一下. 先说说我的解决方法 给hidden组件加个ID 然后在form提交的时候 触发个方法使Ext.getCmp('ID').set

  • ExtJs异步无法向外传值和赋值的完美解决办法

    1.Ext.data.Store.load();方法是异步的,下面的方式获得的reCount始终是0,因为还没等后台的方法执行完就赋值了,此时store的record还没获得值. var testStore = new Ext.data.GroupingStore({ proxy : new Ext.data.HttpProxy({ url : '' }), reader : new Ext.data.JsonReader({ root : 'hstamcx', totalProperty :

  • Extjs实现下拉菜单效果

    Extjs实现下拉菜单效果

    本文实例为大家分享了Extjs实现下拉树效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text8</title> <link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resourc

  • ExtJS4的文本框(textField)使用正则表达式进行验证(Regex)的方法

    Extjs的Regex的验证属性分两种情况,一种是只有红色提示框:另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来. 特别提示:在属性regex后要用 /^ 这里加正则 $/ 把上面的正则表达式包起来否则会报"缺少对象": 比如: 复制代码 代码如下: { xtype:'textfield', fieldLabel: '邮政编码', name:'postCode', regex: /^[1-9]\d{

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

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

    之前用EXTJS的gridPanel组件的时候,因为经常对gridPanel中的stroe数据进行过滤,所以有时候总是导致gridPanel自身所带的scrollbar失效. 取个实例,EXTJS gridPanel自带的滚动条,是有一个固定的列宽来放置这个scrollbar的,如上图所示.所以当这个scrollbar失效的时候,无论你怎么拖动这个滚动条,grid中的数据永远都不会随scrollbar的移动而展示相应区域的数据(换句话说就是你永远看到的数据都是截图中的这几条record). 至于

  • thinkPHP使用post方式查询时分页失效的解决方法

    thinkPHP使用post方式查询时分页失效的解决方法

    本文实例讲述了thinkPHP使用post方式查询时分页失效的解决方法.分享给大家供大家参考,具体如下: 昨天晚上一直没有解决的php项目中的bug,就在刚才终于搞定,在这里还需要感谢各位大神给的帮助! 具体问题描述 最近遇到一个非常棘手的问题,也是因为刚入手thinkphp.在做项目的过程中,因为需要非常多的查询条件,如果以get方式提交表单的话,会因为url长度限制而报错,所以必须使用post方式提交表单数据,但是在分页的过程中,遇到了问题,因为thinkphp自带的分页是以a标签的形式,进

  • iOS开发之导航栏各种右滑返回失效的解决方法汇总

    iOS开发之导航栏各种右滑返回失效的解决方法汇总

    前言 众所周知iOS 的几乎全部页面都是需要右滑返回的,否则用户体验会大打折扣,但是在开发过程中经常会碰到某些页面右滑返回失效的情况,下面记录一下各种情况下右滑返回失效的解决方法. 下面话不多说了,来随着小编一起学习学习吧 自定义返回按钮时失效 当你重写 self.navigationItem.leftBarButtonItem 之后,自带的返回按钮就会被覆盖,右滑返回就会失效,解决办法只要加入下面这句代码即可. - (void)viewDidLoad { [super viewDidLoad]

  • PHP利用header跳转失效的解决方法

    本文实例讲述了PHP利用header跳转失效的解决方法,分享给大家供大家参考.具体方法分析如下: 一.问题: 今天header(\"Location: $url\"),以往跳转总是可以的,今天却不动,只是输出结果,以往自己要确认检查,$url的值获取的是否正确,所以在前面加了echo $url:来调试用,结果就导致了header函数的无效. 二.解决方法: 在PHP中用header("location:test.php")进行跳转要注意以下几点: 1.locatio

  • ajax 操作全局监测,用户session失效的解决方法

    ajax 操作全局监测,用户session失效的解决方法 jQuery(function ($) { // 备份jquery的ajax方法 var _ajax = $.ajax; // 重写ajax方法,先判断登录在执行success函数 $.ajax = function (opt) { var _success = opt && opt.success || function (a, b) { }; var _opt = $.extend(opt, { success: functio

  • Jquery对新插入的节点 绑定Click事件失效的解决方法

    1.有人说用 Live, 事实上现在最新的Jquery已经不支持 Live 了.live的解决方法如下: 你可以看这个 也可以不看 ,只是做到心中有数就可以了.下面介绍ON的方法. live:Live的使用介绍 2.有人用了ON 来解决, 这个解决方法基本在理. On :On的介绍,能解决问题 On的方法,基本能解决问题,但是你也要根据你的具体情况做选择.并不是每个人的代码都像上面这个案例描述的那么简单.但是万变不离其宗. 我是这样来做的,最终把问题解决了. 我有一个UL 标签是静态的,就是说不

  • php多次include后导致全局变量global失效的解决方法

    本文实例讲述了php多次include后导致全局变量global失效的解决方法.分享给大家供大家参考.具体分析如下: 在多个文件中,文件一个接一个include,但最后一个文件里的函数使用global后却无法引用全局变量.例如: a.php文件: <?php $aa = 1; ?> b.php文件: <?php include a.php function show(){ global $aa; var_dump($aa); } ?> 显示:null; 这种失效是由于多种原因造成的

  • vue-cli项目修改文件热重载失效的解决方法

    遇到一个很奇怪的问题,就是之前vue-cli创建的项目,在起初修改文件可以热重载,但是后面突然间就无法无刷新浏览器更新了,一只以为是热重载出问题了,折腾了半天也没纠结出什么结论,最后百度了一下,原来是编译器webstrom的锅. 问题原因 在webstrom系统设置中有一项配置,是 Use "safe write"(save changes to a temporary file first) .webstrom是自动保存的,如果勾选Use "safe write"

  • layui表格 列自动适应大小失效的解决方法

    如下所示: 从官网复制的表格,修改成自适应宽度后失效,原因如下: 以上这篇layui表格 列自动适应大小失效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui 中select下拉change事件失效的解决方法

    layui 中select下拉change事件失效的处理方法 1.select中添加 lay-filter="test" <select lay-filter="test"></select> 2.处方方法 form.on('select(test)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 co

随机推荐