Ext JS 3-在单击网格列标题时禁用排序

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

{
  xtype: 'gridcolumn',
  menuDisabled: true,
  width: '75%'
}

Answer 2

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;
        }
    }
}});

Answer 3

In Ext 6:

Override Ext.grid.column.Column to condition the sortOnClick attribute on the method onTitleElClick

I and used a new configuration enableSortOnClick to control this.

Setting enableSortOnClick = false disables sort on header click but maintains sort functionality on header dropdown menu.

Ext.define('App.overrides.ColumnOverride', {
    override: 'Ext.grid.column.Column',

    config: {
        /** Control sortOnClick at TitleElClick event*/
        enableSortOnClick: false,
    },

    /**@Overrides*/
    onTitleElClick: function(e, t, sortOnClick) {
        return this.callParent([e, t, this.enableSortOnClick && sortOnClick]);
    }
});  

Answer 4

I ended up building my own context menu based on the following post.

How i can create context menu for extjs grid

Answer 5

http://forums.ext.net/showthread.php?12608-CLOSED-How-to-disable-sorting-by-click-the-header-of-column-in-GridPanel