4

1 つのヘッダーの下に複数の列があるグリッドを作成することはできますか?

+-------------------------------------+-----------------------+
| | 列 1 | 列 2、3、4 |
+-------------------------------------+-----------------------+
| | | | | | | | | |
+-------------------------------------+-----------------------+
| | | | | | | | | |
+-------------------------------------+-----------------------+
| | | | | | | | | |
+-----------------------------------------------------+

列ヘッダーのグループ化を試みましたが、サブ列を非表示にする方法はありません。それは次のようになります

+-------------------------------------+-----------------------+
| | 列 1 | 列 2、3、4 |
+ + -----------------------+
| | | | | | | | | |
+-------------------------------------+-----------------------+
| | | | | | | | | |
+-------------------------------------+-----------------------+
| | | | | | | | | |
+-----------------------------------------------------+
4

2 に答える 2

2

これにはオーバーライドが必要です。列構成は次のようになります。

columns: [
    {
        text: "Column 1",
        // width, other settings
    },
    {
        text: "Columns 2, 3, 4",
        // width is computed as sum of child columns
        columns: [
            {
                text: "",
                columnName: "Column 2",  // custom config
                width: // needed
            },
            {
                text: "",
                columnName: "Column 3",
                width: // needed
            },
            {
                text: "",
                columnName: "Column 4",
                width: // needed
            }
        ]
    }
]

columnNameAPIの一部ではない構成に注意してください。それは私がこれを補ったものです。

設定text: ""すると、その列のヘッダーが非表示になります。3つのサブ列すべてに設定すると、行全体が非表示になりますが、ヘッダーがある場所に2pxの細い線が残ります。削除する方法がわかりません。それをCSSすることができるかもしれません。

これにより、希望のレイアウトが得られます。メイン列のメニューからサブ列を非表示にできます。ただし、テキストがないため、メニューは正しく表示されません。そこでcolumnName登場します。

のソースを見つけますExt.grid.header.Container#getColumnMenu。この関数だけのオーバーライドを作成する必要があります。方法は次のとおりです。

Ext.override(Ext.grid.header.Container, {
    getColumnMenu: function(headerContainer) {
        // stuff 
        for (; i < itemsLn; i++) {
            item = items[i];
            menuItem = Ext.create("Ext.menu.CheckItem", {
                text: item.columnName || item.text  // <--- IMPORTANT LINE
        // rest of the function is the same
    }
});

これにより、構成columnNameが存在する場合、それを使用しない既存の列に影響を与えることなく構成が取得されます。これで、複数列のヘッダートリガーをクリックすると、サブ列にネストされたオプションが表示されます。ファンシーになりたい場合は、いくつかのオーバーライドを使用して非表示オプションをフラット化できるはずですが、それはあなたに任せます。

注：これはすべてExtJS4.0.7でテストされています。4.1リリース候補のヘッダーコンテナコードにいくつかの大きな変更があり、これが同じように機能することを保証することはできません。

于 2012-04-13T14:14:27.127 に答える