ftype：'grouping'打破了每列上的extjs Grid Filter菜单

Question

我在选项卡面板内使用EXTJS 4.1 GridPanel，如下所示。当我通过选项卡浏览到该组时，它会很好地加载，但过滤器菜单不起作用，但是当我刷新页面时它会起作用。但是，通过显式设置enableGroupingMenu: false，过滤菜单开始工作，但现在用户看不到分组选项。我在做什么错了？

Ext.define('ABC.view.ABCDGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.requestgridpanel',

requires: [
    'Ext.grid.View',
    'Ext.grid.column.Action',
    'Ext.grid.column.Date',
    'Ext.grid.feature.Grouping',
    'Ext.grid.column.Number',
    'Ext.selection.RowModel',
    'Ext.toolbar.Toolbar',
    'Ext.container.ButtonGroup',
    'Ext.button.Button',
    'Ext.toolbar.Fill',
    'Ext.form.field.Number'
],

stateId: 'ABCGridPanelState',
stateful: true,
itemId: 'ABCGridPanel',
title: 'ABC Search Results',
forceFit: false,
store: 'ABCRequestStore',

initComponent: function() {
    var me = this;

    me.addEvents(
        'abcRequestEditEvent',
        'abcRequestSelectionEvent',
        'abcRequestEditButtonEvent',
        'abcRequestAddButtonEvent'
    );

    Ext.applyIf(me, {
        viewConfig: {
            getRowClass: function(record, rowIndex, rowParams, store) {
                if (record.get('IsReadOnly') === true){
                    return 'isreadonly';
                }
            },
            stateId: 'defGridPanelViewState',
            stateful: true,
            itemId: 'defSearchGridPanelView',
            emptyText: '  (No Requests matching the search criteria were found)',
            listeners: {
                itemdblclick: {
                    fn: me.ondefSearchGridPanelViewItemDblClick,
                    scope: me
                }
            }
        },
        columns: [
            {
                xtype: 'actioncolumn',
                itemId: 'abcRequestActionColumn',
                width: 45,
                items: [
                    {
                        handler: function(view, rowIndex, colIndex, item, e, record, row) {
                            var abcRequestId = record.get('abcRequestId');
                            if (abcRequestId !== null)
                            me.fireEvent('abcRequestEditEvent', this, abcRequestId);
                        },
                        isDisabled: function(view, rowIndex, colIndex, item, record) {
                            return (record.get('abcRequestId')=== null || record.get('IsReadOnly') === true);
                        },
                        icon: '/Content/images/abcRequestIcons/edit.png'
                    }
                ]
            },
            {
                xtype: 'gridcolumn',
                stateId: 'abcRequestIdState',
                stateful: true,
                hidden: true,
                width: 0,
                dataIndex: 'abcRequestId',
                text: 'abcRequestId'
            },
            {
                xtype: 'gridcolumn',
                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                    if (value !== null && value !== "") {
                        var abc= record.get('abcProcedure');
                        if (abc !== undefined && abc !== null && abc !== '') {
                            metaData.tdAttr = 'data-qtip="' + abc.replace(/;/g,'<br/>\r\n') + '"';
                        }
                    }
                    return value;
                },
                stateId: 'CategoryNameState',
                stateful: true,
                width: 80,
                dataIndex: 'CategoryName',
                text: 'Category'
            },
            {
                xtype: 'gridcolumn',
                stateId: 'StatusNameState',
                stateful: true,
                width: 150,
                dataIndex: 'StatusName',
                text: 'State'
            },

        ],
        features: [
            {
                ftype: 'grouping',
                enableGroupingMenu: false
            }
        ],