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

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【Extjs grid panel自带滚动条失效的解决方法】，下面是详细的讲解！

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

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

关于Extjs grid panel自带滚动条失效的解决方法的用户互动如下：

　　相关问题：extjs Gridpanel 横向滚动条后面错位

　　答：建议你把scrollOffset:0, 此属性去掉，默认就可以！ >>详细

　　相关问题：ExtJs gridpanel 分页条失效 求指点

　　答：var store = Ext.create("Ext.data.Store", { //重要，指定每页显示多少数据 pageSize:20, proxy:{ type:"ajax", url:"...", reader:{ type:"json", //重要，指定读取的数据数组 root:"data", //重要，需要后台传一个总的数据量过来 totalProper... >>详细

　　相关问题：extjs3.4 gridpanel的滚动条没出来 排个序又出来了...

　　答：gridpanel里面加入autoScroll: true, 配置项， 第一次加载完没有出现滚动条，可以在store，load里面加入callback配置项，重新排序就行 store.load({ callback:function(){store.sort("F_PROJECT_STAGE", "ASC");} }); >>详细