Question

When sort is enabled in a column, clicking the header automatically sorts on that column. I want to disallow sorting based on a click of the column’s header but retain sorting through the header’s menu. In other words, the only way to sort the column is by entering the header menu. Any thoughts?

Answer 1

var contextMenu = new Ext.menu.Menu({
items: [{
    id: 'sort-high-to-low',
    cls: 'xg-hmenu-sort-asc',
    text: 'Sort Ascending within Group'
},{
    id: 'sort-low-to-high',
    cls: 'xg-hmenu-sort-desc',
    text: 'Sort Descending within Group'
},'-',{
    id: 'sort-high-to-low-all',
    cls: 'xg-hmenu-sort-asc',
    text: 'Sort All Ascending'
},{
    id: 'sort-low-to-high-all',
    cls: 'xg-hmenu-sort-desc',
    text: 'Sort All Descending'
},'-',  {
    id: 'heatmap',
    cls: 'xg-hmenu-heatmap',
    text: 'Open in Heatmap'
}],
listeners: {
    scope: this,
    itemclick: function(item) {
        switch (item.id) {
        case 'sort-high-to-low':
            Ext.getCmp('backtestGrid').getStore().sort(contextMenu.columnId,'ASC');
            this.hide();
            break;
        case 'sort-low-to-high':
            Ext.getCmp('backtestGrid').getStore().sort(contextMenu.columnId,'DESC');
            this.hide();
            break;
        case 'sort-high-to-low-all':
            Ext.getCmp('backtestGrid').getStore().clearGrouping();
            Ext.getCmp('backtestGrid').getStore().sort(contextMenu.columnId,'ASC');
            this.hide();
            break;
        case 'sort-low-to-high-all':
            Ext.getCmp('backtestGrid').getStore().clearGrouping();
            Ext.getCmp('backtestGrid').getStore().sort(contextMenu.columnId,'DESC');
            this.hide();
            break;
        case 'heatmap':
            heatmapCallback(contextMenu.headerName, contextMenu.columnId);
            this.hide();
            break;
        }
    }
}});