ExtJs 4.2.1グリッド行編集後のページスクロールの解決策_html/css_WEB-ITnose

少し前に、当社の開発チームは ExtJs4.2.1Mvc モデルを選択しました。開発プロセス中に多くの問題に遭遇しました (専門外の要求担当者がさまざまな要件を提示したのは避けられませんでした)。気まぐれ)、API をチェックして 1 つずつ解決した後、今後のレビューのために、また ExtJ を初めて使用するネチズンが説明を理解できるように、開発プロセス中に発生した問題と解決した問題を記録します。正しい位置にあるか、間違いがある場合は、修正していただければ幸いです。 (注: 以下に挙げるメソッドはすべて ExtJs ライブラリ内のメソッドであり、js ネイティブではありません)

プロジェクト全体が ExtJs の MVC を使用しているため、プロジェクトは基本的にすべて js ファイルです (カスタマイズされた js ファイル 100 近く、そうでないもの) ExtJs ライブラリについては言及してください)、パフォーマンスの問題は言うまでもなく、ページの読み込みが非常に遅くなります。これは長年の問題です。

質問 1:

グリッド ページのスクロールの問題に関しては、このグリッドには 2 種類のデータがあり、1 つは使用可能なデータ、もう 1 つは使用可能なデータです。データは正常に表示され、無効なデータは灰色で表示されます (灰色の表示は、グリッドの viewConfig の getRowClass 属性を使用して実現できます。次のようになります:

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

);

このグリッドは編集可能であり、混乱なく 2 種類のデータを表示するために、ユーザーは常にグリッドの内容をスクロールする必要がありません。グリッドを編集するので、それについて考えてほしいとのことで、方法を探していたので、この要件を完璧にするために 2 日を費やしました (その過程で、それを達成するために 3 つの方法を使用しました。3 番目の方法が最も完璧です)。 :

方法 1: focusRow( row, [lay] ) を直接使用し、特定の行にフォーカスさせます

方法 2: 現在編集中の行とグリッドの最初の行のレコードを取得し、垂直距離を計算します。 getOffsetsTo() メソッドを使用してグリッド内の 2 行のレコードを取得し、スクロール バーをこの距離値の位置までスクロールします。これですべてです。このロジックはグリッドの viewConfig 構成に実装され、行の編集後に Grid.getView().XXX() を通じて呼び出されます。 viewConfig に次の 2 つのメソッドを追加します:

//指定された Record にグリッドをスクロールします
scrollToRecord:function(record){
varindex = this.ownerCt.getStore().indexOf(record)
this.scrollToRow(index ;
var row = Ext.get(this.getNode(rowIndex)); // 現在編集中の行
var distance = row.getOffsetsTo(firstRow)[1] // 垂直距離を取得します.scroller はないようですこの属性は Ext4.x にありますが、3.x にのみ存在しますか?
This.getEl().setScrollTop( distance); // スクロール バーを設定します
}

方法 3: 最初の 2 つの方法もニーズを満たすことができますが、完璧ではありません。これも最も単純です。

行を編集する前に、まず現在のスクロールバーの位置を取得します: varscrollTop =grid.getView().getEl().getScrollTop(); //ソートの前に、グリッドスクロールバーのscrollTop

ソート後編集が完了したら、スクロール バーをスクロールして初期位置に戻します。 Grid.getView().getEl().setScrollTop(scrollTop); グリッドに固定列がある場合、または一部の列がロックされている場合: true 属性を設定すると、ロックされたグリッドのビューを直接取得できないため、無効になります。スクロールする場合は、両方のビューをスクロールする必要があります。そうしないと、テーブルがスクロールされます。ああ〜〜、これを知った上で他の設定は上記と同じになります！

質問 1 が完了しました。