1

ページネーション ツールバーを備えた ExtJS グリッド パネルがあります。

私の問題は、静的制限しか指定できないことです。画面にはさまざまな解像度があり、グリッド パネルは画面に合わせて自動的に拡大されるため、これは私が望むものではありません。

これで、ロードするアイテムの量を非常に高く設定できるようになりました。ただし、これにより、画面が小さいユーザーはスクロールしなければならなくなります。

または、中程度の画面に合わせて設定することもできます。しかし、ExtJS が 1 ページに収まる項目数を自動的に計算して読み込む方法はありますか?

4

3 に答える 3

3

単一のグリッド行の高さがわかっている場合（CSSによって異なります）、行数を自分で計算できます。これが唯一のオプションだと思います。

サンプルコード（未テスト）：

var rowHeight = 28;
var grid = ... // initialize the grid
grid.on('afterrender', function(g) {
    var height = g.body.getHeight(true),
        rows = Math.floor(height / rowHeight);
    g.getStore().pageSize = rows;
    g.getStore().load();
});

編集

Sebastian Hoitzが示しているように、このresizeイベントは、たとえばブラウザウィンドウのサイズを変更すると再起動するため、リッスンするのに適したイベントです。一方afterrender、イベントは1回だけ発生します。

于 2012-06-13T09:18:01.147 に答える
3

Stefan Gehrigs のコメントのおかげで、私はこれを思いつきました:

# Adjust the page size of our store
@on "resize", (grid, width, height) =>
    rowHeight = 21

    if @title
        height -= 23 # Title row

    height -= 27 # toolbar height
    height -= 27

    height -= 27 # Pagination

    height -= 25 # Grid title

    rows = Math.floor(height / rowHeight)

    grid.getStore().pageSize = rows
    grid.getStore().load()
于 2012-06-13T10:17:32.713 に答える