1

グリッド列を動的に非表示にするという非常に厄介な問題があります。列を非表示にした後 (セルに長いテキストを含む)、グリッド行の高さが劇的に増加します。隠す前 ここに画像の説明を入力

非表示操作後

ここに画像の説明を入力

ご覧のとおり、最初の行は間違いなく高すぎます。おそらく、その動作の理由は、グリッド セルでテキストの折り返しを使用しているという事実です。

.x-grid-cell-inner { white-space: normal; }

列を非表示にした後 (および textwrap を使用) に高さを変更せずに、グリッド行を作成する効率的な方法はありますか?

4

1 に答える 1

2

私は以前、この奇妙な現象に個人的に遭遇したことがあります。この問題は、Ext JS が幅を 0px に設定して列を「非表示」にするために発生します。

私の解決策は、次のようにグリッド ヘッダーにイベント リスナーを追加することでした。

// me is the grid
me.headerCt.on({
    columnhide: me.removeWordWrapOnHide,
    columnshow: me.addWordWrapOnShow,
    scope:      me
});

既存のクラスを使用する代わりにx-grid-cell-inner、次のように新しいクラスを作成します。

<style type="text/css">
    td.grid-cell-wordwrap > div {
        white-space: normal; /* may need !important, not sure */
    }
</style>

次に、これら 2 つの関数の実装により、次のことが行われました。

removeWordWrapOnHide: function(headerCt, column){
    var me = this,
        wordWrapRe = /wordwrap/;
    if(column.useWordWrap || wordWrapRe.test(column.tdCls)){
        column.tdCls = column.tdCls.replace("grid-cell-wordwrap", "");
        column.useWordWrap = true;  // Flag to check on show
        me.view.refresh();
    }
},

addWordWrapOnShow: function(headerCt, column){
    var me = this,
        wordWrapRe = /wordwrap/;
    if(column.useWordWrap && !wordWrapRe.test(column.tdCls)){
        column.tdCls = "grid-cell-wordwrap " + column.tdCls;
        me.view.refresh();
    }
}

最も効率的な方法ではないかもしれませんが、仕事は完了します。

于 2012-09-12T16:34:02.043 に答える