Extjs 4 disable sort if grid is empty

Question

Hello stackoverflow community,

is it somehow possible to disable the sorting mechanism in a grid for every column on a condition? Like... if the grid hasn't any data loaded, the sorting should be disabled, else enabled.

I have the problem that if there is no data and you click on a column to sort, the remote sorting mechanism, will start loading the whole data and sorts it, too ... This behaviour isn't needed or wished, so I want to disable the sorting possibility.

Your help is appreciated. Thanks in advance and have a nice day.

Answer 1

I have written the following function to achieve the same solution:

 function disableColumnSorting(disable){
 var grid = Ext.getCmp('billRecordGrid'),
     cols = grid.query('gridcolumn'),
     colLength = cols.length,
     i = 0;


     for(i; i < colLength; i++) {
         if (disable) {
             cols[i].sortable= false;
         } else {
             cols[i].sortable= true;
         }
     }
}

Thanks to drew630, you gave me a helpful hint, so I could solve my problem on my own.

Answer 2

This is a bit of a hack, but seems to work OK:

http://jsfiddle.net/q43HC/6/

var data = [{
    data1: 'test',
    data2: 'test'
}, {
    data1: 'test2',
    data2: 'test2'
}];

var store = Ext.create('Ext.data.Store', {
    fields: ['data1', 'data2'],
    data: data
});

Ext.define('SampleGrid', {
    extend: 'Ext.grid.Panel',
    store: store,
    height: 250,
    width: 400,
    title: 'My Window',
    columns: [{
        text: 'test',
        dataIndex: 'data1'
    }, {
        text: 'test2',
        dataIndex: 'data2'
    }],
    bbar: [{
        text: 'Clear Store',
        handler: function() {
            store.removeAll();
            var grid = this.up('grid'),
                cols = grid.query('gridcolumn'),
                i = 0,
                len = cols.length;
            for (; i < len; i++) {
                cols[i].doSort(null);
                cols[i].__toggleSortState = cols[i].toggleSortState;
                cols[i].toggleSortState = function() {};
            }
        }
    }, {
        text: 'Reload Store',
        handler: function() {
            store.loadData(data);
            var grid = this.up('grid'),
                cols = grid.query('gridcolumn'),
                i = 0,
                len = cols.length;
            for (; i < len; i++) {
                if (cols[i].__toggleSortState) {
                    cols[i].toggleSortState = cols[i].__toggleSortState;
                }
            }
        }
    }],
    renderTo: Ext.getBody()
});

Ext.onReady(function() {
    var grd = new SampleGrid();
});

I am just changing the sort state when the data is removed in order to remove any current sorting then replacing the toggleSortState function with an empty one so clicking the header will not sort the column. When reloading the store I put the function back.. You will have to adapt this to your project, but could create a store aware grid with similar logic.

Answer 3

You can do this globally by overriding the Ext.data.Store.sort method. The system I was working on uses remoteSort and hence hits the server everytime the user clicks the column header to sort, even if the grid itself is empty, pretty much same with your problem.

This is the code that you only need to declare in a single location (ie. your ext-overrides file or commons file), instead of in every single grid:

Ext.define('Ext.overrides.data.Store', {
    override: 'Ext.data.Store',
    sort: function() {
        //prevents the grid from submitting a request if store is empty, for remote sort
        if (this.count() > 0) { 
            this.callParent(arguments);
        }
    }    
});

Answer 4

If you do not want anything to happen when the grid is empty, you could put this in the store of the grid:

listeners: {
            beforeload: function() {
                return false when my conditions is met.;
            }
        }

This way your store will not load and nothing will happen. This is also handy when you have a pager component on the grid and where your server expects e.g. extraParams that are not yet set. If you expect extraParams, and when not yet set, the user clicks the refresh on the pager, you end up with exceptions. But with this check, you can prevent a call to the back-end if conditions are not met.

I sometimes set my api.read URL to undefined, (in cases where the store needs extraParams that are not yet set) and only when those params are available, I also set the URL (with a call in the store itself where the url is already set e.g. activateRead(). In the beforeload, I then test if the api.read is undefined or not.

Hope it helps. Regards Lawrende