In general, we do not need to interact with the background to save the configuration of the header of the list. We can meet the general use requirements (browser support is required) by saving it directly in localStorage.

Code directly, plug-in:

 1 Ext.define('ux.plugin.ColumnCustom', {
 2     alias: 'plugin.columnCustom',
 3     xtype: 'columnCustom',
 4     //Initialization
 5     init: function (gridPanel) {
 6         var me = this;
 7         me.owner = gridPanel;
 8         //Set header status according to existing configuration items
 9         me.setColumnConfig(gridPanel);
10         gridPanel.on({
11             columnschanged: me.saveColumnConfig,
12             scope: me
13         });
14     },
15 
16     setColumnConfig: function (gridPanel) {
17         var me = this,
18             xtype = gridPanel.getXType(),
19             currentColumnConfig = me.getCurrentColumnConfig(),
20             columnConfig = currentColumnConfig[xtype],
21             columns = gridPanel.getColumns();
22         if (!columnConfig) return;
23         columns.forEach(function (column) {
24             var dataIndex = column.config.dataIndex;
25             //Only regular columns have explicit dataIndex，Non routine columns such as serial number column shall be excluded
26             if (!dataIndex) return;
27             column.setHidden(columnConfig[dataIndex]);
28         });
29     },
30     saveColumnConfig: function () {
31         var me = this,
32             gridPanel = me.owner,
33             currentColumnConfig = me.getCurrentColumnConfig(),
34             columns = gridPanel.getColumns(),
35             xtype = gridPanel.getXType(),
36             config = {};
37         columns.forEach(function (column) {
38             var dataIndex = column.config.dataIndex;
39             //Only regular columns have explicit dataIndex，Non routine columns such as serial number column shall be excluded
40             if (!dataIndex) return;
41             config[dataIndex] = column.isHidden();
42         });
43         //Use xtype Indexing is a relatively reliable approach
44         currentColumnConfig[xtype] = config;
45         //localStorage The value type of is limited to string type
46         localStorage.setItem('columnConfig', Ext.encode(currentColumnConfig));
47 
48     },
49     getCurrentColumnConfig: function () {
50         var allColumnConfigString = localStorage.getItem('columnConfig'),
51             allColumnConfig = Ext.decode(allColumnConfigString, true);
52         return allColumnConfig || {};
53     }
54 });

How to use: because this is a more general requirement, this plug-in is configured for all gridpanels by default, and it supports manual configuration parameters to disable it. Consider copying the gridPanel class.

The code is as follows:

Ext.define('override.grid.Panel', {
    override: 'Ext.grid.Panel',
    requires: ['ux.plugin.ColumnCustom'],

    columnCustomDisable: false,

    initComponent: function () {
        var me = this;
        me.callParent();
        //Add auto save header plug-in by default,Add a configurable property here to disable this plug-in
        if (!me.columnCustomDisable) {
            me.addPlugin('columnCustom');
        }
    }
});

Above.