Extjs grid panel自帶滾動(dòng)條失效的解決方法
之前用EXTJS的gridPanel組件的時(shí)候，因?yàn)榻?jīng)常對(duì)gridPanel中的stroe數(shù)據(jù)進(jìn)行過濾，所以有時(shí)候總是導(dǎo)致gridPanel自身所帶的scrollbar失效。
取個(gè)實(shí)例，EXTJS gridPanel自帶的滾動(dòng)條，是有一個(gè)固定的列寬來放置這個(gè)scrollbar的，如上圖所示。所以當(dāng)這個(gè)scrollbar失效的時(shí)候，無論你怎么拖動(dòng)這個(gè)滾動(dòng)條，grid中的數(shù)據(jù)永遠(yuǎn)都不會(huì)隨scrollbar的移動(dòng)而展示相應(yīng)區(qū)域的數(shù)據(jù)（換句話說就是你永遠(yuǎn)看到的數(shù)據(jù)都是截圖中的這幾條record）。
至于為什么gridpanel會(huì)失效？暫時(shí)也不清楚原因是什么。之前在Extjs的論壇和stackoverflow上都有人遇見類似的問題，但是版本可能是都是4.1之前的，Extjs的dev team說他們從4.1版本開始已經(jīng)修復(fù)了這個(gè)問題（不確定，希望用過4.1版本的童鞋論證下）。
好了，現(xiàn)在來說說怎么解決scrollbar失效。
xtype: 'gridpanel',
// autoScroll:true,
scroll:false,
viewConfig: {
style: { overflow: 'auto', overflowX: 'hidden' }
}
可以看到，禁用了autoScroll這個(gè)屬性，并且把scroll設(shè)置為false，然后設(shè)置viewConfig, 這里把橫向的滾動(dòng)條給禁用了，只保留縱向的滾動(dòng)條。OK 問題解決，看看效果：
這時(shí)會(huì)發(fā)現(xiàn)滾動(dòng)條沒有了自己的固有列，而是和grid的最后一個(gè)列并在了一起，gridPanel自帶的scrollbar就這樣被禁用咯。
同時(shí)也解決了這個(gè)潛在的bug。
但是這種用法最好是將grid中的所有列都設(shè)置好固定的寬度，并且設(shè)置屬性：
resizable:false
這樣可以避免一些禁用橫向滾動(dòng)條帶來的不必要麻煩。
相關(guān)文章
其實(shí)這一個(gè)總是很容易解決，只要在Ext.onReady()方法之前（或者方法的第一句）加上下面這一句代碼就解決了！2010-12-12
EXT窗口Window及對(duì)話框MessageBox
ExtJS中窗口是由Ext.Window類定義，該類繼承自Panel，因此窗口其實(shí)是一種特殊的面板Panel。窗口包含了浮動(dòng)、可拖動(dòng)、可關(guān)閉、最大化、最小化等特性。2011-01-01
ExtJs GridPanel簡(jiǎn)單的增刪改實(shí)現(xiàn)代碼
ExtJs GridPanel中實(shí)現(xiàn)增刪改效果的代碼，需要的朋友可以參考下。2010-08-08
Extjs3.0 checkboxGroup 動(dòng)態(tài)添加item實(shí)現(xiàn)思路
Extjs3.0中的CheckboxGroup默認(rèn)不能動(dòng)態(tài)添加item,如需要數(shù)據(jù)動(dòng)態(tài)創(chuàng)建，試著創(chuàng)建整個(gè)CheckboxGroup，而不是動(dòng)態(tài)添加item，具體實(shí)現(xiàn)如下，感興趣的朋友可以了解下2013-08-08
多人都習(xí)慣在渲染子組件的時(shí)候?qū)ird渲染到容器內(nèi)的一個(gè)div里，為什么那么多人喜歡使用這種方式來添加子組件呢，下面為大家詳細(xì)介紹下2013-06-06
Extjs學(xué)習(xí)筆記之二 初識(shí)Extjs之Form
form恐怕是Web開發(fā)中最常用的控件了，Extjs對(duì)普通的html form進(jìn)行了一些封裝，使其具有基本的外觀和一些簡(jiǎn)便的和服務(wù)器進(jìn)行通信的方法。2010-01-01
ExtJS 訪問容器對(duì)象使用說明，需要的朋友可以參考下。2009-10-10
Extjs組件的定義在網(wǎng)上看到了一個(gè)實(shí)例，于是拷了下來留著以后用，現(xiàn)在把它曬出來與大家一起分享，感興趣的各位可不要錯(cuò)過了哈2013-06-06
ExtJs 學(xué)習(xí)筆記 Hello World!
最近學(xué)ajax，接觸到了Extjs這個(gè)強(qiáng)大的框架。我想通過我的學(xué)習(xí)筆記，最后可以讓大家上手在項(xiàng)目中使用Ext。首先我會(huì)寫一些基本的用于入門Ext的文章，打好基礎(chǔ)是很重要的。2008-12-12
Extjs學(xué)習(xí)筆記之五 一個(gè)小細(xì)節(jié)renderTo和applyTo的區(qū)別
Extjs的組件有兩個(gè)看起來類似的配置項(xiàng)，applyTo和renderTo，這兩個(gè)配置項(xiàng)都是用來指定將該extjs組件加載到什么位置。那他們到底有什么區(qū)別呢，網(wǎng)上搜了下，有兩篇博文也是關(guān)于這個(gè)的。2010-01-01