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

【问题标题】：Ext JS 3 - Disable sort on click of a grid column headerExt JS 3 - 单击网格列标题时禁用排序
【发布时间】：2019-05-09 04:38:35
【问题描述】：

在列中启用排序后，单击标题会自动对该列进行排序。我想禁止基于单击列标题进行排序，但保留通过标题菜单进行排序。换句话说，对列进行排序的唯一方法是进入标题菜单。有什么想法吗？

【问题讨论】：

有趣——你为什么需要这个？
首先我想要移除选择列的功能。然后我的需要更改为在标题中要求自定义菜单项。请参阅下文了解我的编码方式。

标签： javascript extjs

【解决方案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;
        }
    }
}});

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我最终根据以下帖子构建了自己的上下文菜单。

How i can create context menu for extjs grid

【讨论】：

【解决方案4】：

分机 6：

覆盖Ext.grid.column.Column 以在方法onTitleElClick 上设置sortOnClick 属性

我使用了一个新的配置enableSortOnClick来控制这个。

设置enableSortOnClick = false 会禁用标题点击排序，但会保留标题下拉菜单上的排序功能。

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

【讨论】：

欢迎来到 StackOverflow！您的回答需要更多关于代码如何工作的解释才能成为一个好的答案。

【解决方案5】：

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

【讨论】：