4

グループ化されたヘッダー グリッドがあります。グリッドの定義は、ここのフィドルにあります。

結果はこんな感じ。

ここに画像の説明を入力

グループ化されたヘッダー内の列を含め、すべての列を等間隔にしたい。私は何を間違っていますか？

4

3 に答える 3

3

Ext JS は現在、この動作をサポートしていません。私はこれとまったく同じ問題を抱えていました。ソースコードにはこれを行うことはできないと明示的に記載されているため、実際にはバグではありませんが、グリッドの最大の欠点の 1 つと思われます (列のロックのすぐ隣)。

私の解決策は、4.1.0 でExt.grid.ColumnLayout#completeLayoutメソッドをオーバーライドすることでした。ここで、子アイテム (列) の幅が決定されます。基本的にやろうとしているのは、グリッドで利用可能な合計幅 (提供されたレイアウト/コンテキスト オブジェクトを介して利用可能) を取得し、すべてのリーフ列で flex->width を手動で変換することです。次に、列のグループごとに、計算された幅を合計して、親の幅を設定できます。メソッドでこれを行うと、completeLayout各レイアウト中に自動的に実行されるため、サイズ変更イベントなどを監視する必要はありません。

優れたデバッガーとかなりの忍耐力があれば、それを理解できます。コード例を投稿したいのですが、私のソリューションは約 100 行で、作業コードの一部です。ただし、いくつかの注意点を指摘することはできます。

  1. 2 レベルのヘッダーのみをサポートする必要がある場合は、メソッド全体を 3 つ以上のレベルで再帰的にする必要はありません。ヤグニ。

  2. 非表示の列に注意してください。非表示のグループ ヘッダーが子列の非表示プロパティを設定しないというバグがあったと思います。私がよく経験する問題の 1 つは、コラムを表示するとすべてが奇妙な方向に変化してしまうことでした。

  3. 封印されていないグループに注意してください。すべての列を密閉することでこれを解決しましたが、列を自由に移動できることが要件の一部である場合は、追加の手順が必要になる場合があります。

正直なところ、最善の解決策は、これを Sencha フォーラムに機能リクエストとして提出し、なぜそのような重要な機能がまだ Ext JS ライブラリに存在しないのかを尋ねることです。

編集: Sencha サポート フォーラムにソース コードを投稿しました。

于 2012-09-13T12:21:14.677 に答える
2

サブ列を他の列と同じように使用したい場合、たとえば、固定幅の列が 2 つあり、グループ化された列がフレックス ( auto width ) を持つ列のように動作する必要がある場合は、このサイズ変更を行う独自の関数を作成する必要があります。 .

たったの2行です: sencha example

説明:resizeイベントリスナーをグリッドに追加し、関数内でサブ列のサイズを変更する必要があります

グリッド リスナー:

listeners: {
    resize: function(grid) {
        // you need to add and itemId for the sub columns parent
        var subCols = grid.getView().getHeaderCt().child('#sub-cols');
        // 200 = sum of the fixed width of columns
        subCols.setWidth(grid.getWidth() - 200);
    }
}

グリッド列:

{
    text: 'sub columns',
    itemId: 'sub-cols',
    columns: [{
        text: 'Email',
        dataIndex: 'email',
        flex: 1
     }, {
        text: 'Phone',
        dataIndex: 'phone',
        flex: 1
     }]
}
于 2015-02-20T18:51:47.487 に答える
-1

グループ化された列のフレックスを 4 倍小さく設定しようとしましたが (コメント値 0.25 値)、実際には 4 倍大きくするべきではありませんか?

Extjs フレックス

于 2012-09-13T11:16:23.930 に答える