ExtJs4.2.1Grid行編輯后，頁面滾動的解決方案_html/css

　　因為整個項目都是運用的ExtJs的MVC,所以項目中基本都是js文件（自定義的js文件接近100個，更不用說ExtJs的庫了），導(dǎo)致頁面加載很慢，性能問題就不提了，這是個老大難問題！

問題1：

　　關(guān)于Grid頁面滾動的問題，現(xiàn)在有一個Ext.grid.Panel，在這個grid中有兩類數(shù)據(jù)，一類是可用數(shù)據(jù)，另一類是禁用數(shù)據(jù)，可用數(shù)據(jù)正常顯示，禁用的則灰色顯示（灰色顯示利用grid的viewConfig的getRowClass屬性可以做到，seems like this:

　　getRowClass : function(record,rowIndex,rowParams,store){
return (record.get('youxiao1') == 0 || record.get('isedit') == 0) ? 'row-valid' :' ';
}

）；

在這個grid中的兩類數(shù)據(jù)是可以編輯的，當編輯后，為了實現(xiàn)兩類數(shù)據(jù)不混亂顯示，于是就用到了store.sort()方法，這個方法會導(dǎo)致grid內(nèi)容出現(xiàn)滾動，用戶不希望在編輯grid時總是滾來滾去，于是叫我們想想辦法，于是我用了兩天時間來完善這個需求（這過程中，使用了3中方式來實現(xiàn)，第三種方式最完美）：

　　方式一：直接使用focusRow( row, [delay] )，讓某一行聚焦；

　　方式二：獲得當前編輯行和grid中第一行的record，然后通過getOffsetsTo（）方法計算這兩行記錄在grid的垂直距離是多少，然后讓滾動條滾動到這個距離值的位置，that's all！這個邏輯都在grid的viewConfig配置中實現(xiàn)，然后在編輯行后通過grid.getView().XXX()調(diào)用。在viewConfig中添加以下兩個方法：

//滾動Grid到指定的Record
scrollToRecord:function(record){
var index = this.ownerCt.getStore().indexOf(record);
this.scrollToRow(index);
},

//滾動Grid到指定的行
scrollToRow:function(rowIndex){
var firstRow = Ext.get(this.getNode(0)); 　　//grid中第一行
var row = Ext.get(this.getNode(rowIndex)); //當前編輯行
var distance = row.getOffsetsTo(firstRow)[1]; //獲取垂直距離
//this.scroller.dom.scrollTop = distance; 　　this.scroller在Ext4.x中似乎沒有這個屬性，它只存在于3.x？
this.getEl().setScrollTop(distance);　　//設(shè)置滾動條
}

　　方式三：雖然前兩種方式也能滿足需求，但是不完美，現(xiàn)在說說最完美的解決方案，也是最簡單的。

　　在編輯行之前，先獲得當前滾動條的位置：var scrollTop = grid.getView().getEl().getScrollTop(); //排序之前，grid滾動條的scrollTop

　　在編輯結(jié)束之后，再將滾動條滾回最開始的位置：grid.getView().getEl().setScrollTop(scrollTop);

如果我們的Grid中有固定列，就是有些column設(shè)置了locked：true這個屬性的話，就不能用上面的方法，將會無效，因為有l(wèi)ocked的grid的view不能直接獲取到，它分為lockedView、normalView，在進行滾動時，要兩個view都進行滾動，否則會出現(xiàn)表格錯位的現(xiàn)象哦~~，知道這點以后，其他設(shè)置就和上面的一直了！

問題1完畢！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com