Ext JS 3 - Disable sort on click of a grid column header

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?

First I wanted the remove the ability to select columns on and off. Then my need changed to requiring custom menu items in the header. See below for how I coded it. — Jason Strimpel, Jun 28 '11 at 11:25

score 1 · Answer 1 · edited May 08 '19 at 20:38

1

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

edited May 08 '19 at 20:38

m4risU

1,231
11
14

answered May 08 '19 at 19:47

angel fernandez

21
1

score 1 · Accepted Answer · answered Jun 28 '11 at 11:26

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

score 0 · Answer 3 · edited Nov 13 '18 at 17:58

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

Welcome to StackOverflow! You answer needs more explaination about how the code works to be a good answer. — Tân, Nov 13 '18 at 14:59

score 0 · Answer 4 · edited May 23 '17 at 12:24

0

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

How i can create context menu for extjs grid

edited May 23 '17 at 12:24

Community

1
1

answered Jun 25 '11 at 22:46

Jason Strimpel

14,670
21
76
106

score -1 · Answer 5 · answered Aug 19 '11 at 04:20

-1

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

answered Aug 19 '11 at 04:20

Liu

645
2
8
16

Ext JS 3 - Disable sort on click of a grid column header

5 Answers5