ExtJs : One column header for multiple columns

extjs4, javascript

Solution

This one requires an override. Here's what your column config should look like:

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
            }
        ]
    }
]

Note the `columnName` configs that aren't part of the API. That's something I made up for this.

Setting `text: ""` hides the header for that column. Setting it for all three sub-columns hides the whole row, but leaves you with a thin, 2px tall line where the header would be. Not sure how to remove it. Might be able to CSS it away.

This will give you your desired layout. You can hide the sub-columns via the main column's menu. However, the menu won't look right because there's no text. That's where the `columnName` comes in.

Find the source for `Ext.grid.header.Container#getColumnMenu`. You need to create an override for just this function. Here's how it goes:

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
    }
});

This will pick up your `columnName` config if it exists without affecting existing columns that don't use it. Now when you click on the header trigger for your multi-column, you'll get a nested option your sub-columns. If you want to get fancy, you should be able to flatten the hide options through some more overrides, but I'll leave that up to you.

Note: This was all tested on Ext JS 4.0.7. There were some big changes to the header container code in the 4.1 release candidates and I can't guarantee this will work the same way.

Problem

Is it possible to create a grid with several columns under one header? ``` +-----------------------+-----------------------+ | Column 1 | Column 2,3,4 | +-----------------------+-----------------------+ | | | | | +-----------------------+-----------------------+ | | | | | +-----------------------+-----------------------+ | | | | | +-----------------------------------------------+ ``` tried column header grouping but there's no way to hide the sub columns. it'll look something like ``` +-----------------------+-----------------------+ | Column 1 | Column 2,3,4 | + +-----------------------+ | | | | | +-----------------------+-----------------------+ | | | | | +-----------------------+-----------------------+ | | | | | +-----------------------------------------------+ ```

Original source