How to dynamically hide headers in ExtJs grid?

Question

JavaScript

Hello. There is Grid on ExtJs (5.1.3).
It may or may not contain data :)
The grid has columns with headings. And there is an option `hideHeaders` which allows you to hide the names of the columns in the grid.
I need to show these headers if there is data in the grid, and hide them if there is no data.
Headers are hidden by default. I tried at the moment when the store was loaded, and there is data. manipulated but didn't work..

...
constructor: function(config) {
        var store = Ext.create('Giggster.modules.home.store.BufferedGigg', {
            // leadingBufferZone: Giggster.constants.HOME.GRID_PAGE_SIZE
        });

        store.on('load', function(st) {
            if (store.data.length > 0){
               this.hideHeaders = false;
            } 
        }, this);

        this.callParent([
            Ext.applyIf(config || {}, {
                store: store,
                cls: 'add-create-to-job-grid',
                hideHeaders: true,
....

Answer 1

The way you do it will not work, since hideHeaders is a configuration parameter and changing it in the store load event will not affect the display of columns in any way, since it is used in the initComponent method at the time the component is built. I'm not sure exactly, but I would try to access the header component of this grid and already hide it with the hide method. You can also look at how this configuration parameter is used in the grid itself in initComponent, or rather in its parent ( docs.sencha.com/extjs/5.1.4/api/src/Table.js-2.htm ...
solution, and maybe with a suggestion... =)