CODEWITHSUNDEEP
javascriptextjs4
Bordor Turtle
Bordor Turtle

Reputation: 51

ExtJs : One column header for multiple columns

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       |
+                       +-----------------------+
|                       |        |      |       |
+-----------------------+-----------------------+
|                       |        |      |       |
+-----------------------+-----------------------+
|                       |        |      |       |
+-----------------------------------------------+

Upvotes: 4

Views: 9264

Answers (2)

jeff
jeff

Reputation: 21

Just add style property on your sub-header columns config like this:

columns: [{
    header: 'Header',
    defaults: {
      style: { display: 'none !important' } <--here is the magic
    },
    items: [{
      header: '',
      dataIndex: ''
    },{
      header: '',
      dataIndex: ''
    }]   
}]

Upvotes: 1

Eric
Eric

Reputation: 6995

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.

Upvotes: 4

Related Questions