ExtJS 6 grid doesn't update/refresh column headers properly

Question

I've got a basic ExtJS gridpanel on which I can apply custom state on the fly. Using another control such as a combobox or another grid, my application applies the selected state on the grid. An example of this state:

{
"height": 384,
"columns": [{
    "id": "h107"
},
{
    "id": "h1",
    "width": 30
},
{
    "id": "unplannedtasks_ActualEndDate",
    "hidden": true,
    "width": 100
},
{
    "id": "unplannedtasks_ActualNoResources",
    "hidden": true,
    "width": 100
},
{
    "id": "unplannedtasks_ActualResponseDateTime",
    "hidden": true
},
{
    "id": "unplannedtasks_ActualTotalDurationInSeconds",
    "width": 100
},  
"filters": []
}

Here's the corresponding columns section of the grid declaration:

Ext.define('Ext.grid.Stateful', {
  extend: 'Ext.grid.Panel',  
  stateEvents: ['columnmove', 'columnresize', 'sortchange', 'hiddenchange', 'groupchange', 'show', 'hide'],
  // CODE OMMITTED FOR BREVITY
 initComponent: function () {
    Ext.apply(this, {
       columns: [
             filterAction,
             new columns.tasks.ActualEndDate({ id: 'unplannedtasks_ActualEndDate', hidden: false }),
             new columns.tasks.ActualNoResources({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
             new columns.tasks.ActualResponseDateTime({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
             new columns.tasks.ActualTotalDurationInSeconds({ id: 'unplannedtasks_ActualTotalDurationInSeconds', hidden: false }
         ]
   });
 }

})

An example of a column definition:

 Ext.define("columns.tasks.ActualNoResources", {
  extend: "Ext.grid.column.Column",
  text: 'ActualNoResources',   
  dataIndex: 'ActualNoResources',  
  editor: {
    allowBlank: false
  }, filterable: true,
  filter: {
    type: 'string'
  }
});

Everything goes as I expected except the column headers don't seem to refresh properly. If I open the columns panel in the grid, it is showing the correct amount of visible and hidden columns. Same story with the filters: if there's a filter in the state, it applies the correct value on the correct field. It's as though the column headers need to be refreshed in some way.

I tried to use grid.getView().refresh() but that doesn't work. Instead, if I resize the grid, it does refresh the hidden columns but not the columns that were initially hidden but now visible.

I think I am missing a simple line of code that belongs in the applyState method of the grid so I can command the grid to refresh the grid with the new state rather than the previous or initial state.

Any ideas on how to solve this?

In your second code snippet (with the columns array), how is this defined? Is it using Ext.define or is that columns config when you are creating an instance of the grid? Also, what do you mean by "don't seem to refresh properly"? — Mitchell Simoens
I updated the second code snippet. It's part of the grid definition, by using Ext.define indeed. I apply the columns in the initComponent function. And concerning the refreshing issue, all settings in the grid are there to assume everything is ok: the filters are applied, the right columns are ticked in the grid menu. It's just that the state is not visible in the column headers (hidden fields in the state are still visible in the grid for instance). If I manually resize the grid, some trigger is fired which refreshes the grid, causing the grid to be displayed correctly. — hbulens

hbulens hbulens · Accepted Answer · 2016-02-24T14:29:44

As it turns out, the scenario that I pursue is not possible out of the box with ExtJS. What I'm asking can only be done during startup (without intervention of a developer's custom code) so I had to quit this approach and provide custom code. In the end, I had to rebuild the columns and then pass that collection to the reconfigure(store, columns) method of the grid.

ExtJS 6 grid doesn't update/refresh column headers properly

1 Answers