View Full Version : How to remove grid column menu Item like Sort Ascending in Sencha 4.2.1

6 Mar 2014, 5:05 AM

I am using Sencha 4.2.1 and I want sorting on cloumn header only. I dont want menu item like Sort Ascending and Sort Descending. Please help me out to achieve this.


Johnny Major
6 Mar 2014, 7:19 AM
You could just set the column defaults menuDisabled to false;


Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : {
defaults : {
menuDisabled : true
items : [{
text: 'Name',
dataIndex: 'name'
text: 'Email',
dataIndex: 'email',
flex: 1
text: 'Phone',
dataIndex: 'phone' }
height: 200,
width: 400,
renderTo: Ext.getBody()

21 Mar 2014, 2:00 AM
Thanks for help, But if i will set menuDisabled to true for a column then i wont be able to see column menu but i am using filter so filter is also not coming. Right now i am able to see 4 menu option name sort ascending, sort descending, columns and filters. I want to remove all the options except Filters in menu option. Please let me know how can i achieve this.Thanks,Nishant

21 Mar 2014, 3:09 AM
Maybe you can use getMenuItems (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.header.Container-method-getMenuItems)() of column object

1 Apr 2014, 6:07 AM

when we click on column menu we are able to see generally 4 options, Sort Ascending, Sort Descending, Columns, Filters. So my requirement is I want there only Filters option not others. Please let me know how can i achieve this.


1 Apr 2014, 6:46 AM

I think you have to overide this function

Ext.grid.header.Container.getMenuItems: function() {
var me = this,
menuItems = [],
hideableColumns = me.enableColumnHide ? me.getColumnMenu(me) : null; if (me.sortable) { menuItems = [{ itemId: 'ascItem', text: me.sortAscText, iconCls: me.menuSortAscCls, handler: me.onSortAscClick, scope: me },{ itemId: 'descItem', text: me.sortDescText, iconCls: me.menuSortDescCls, handler: me.onSortDescClick, scope: me }]; } if (hideableColumns && hideableColumns.length) { if (me.sortable) { menuItems.push('-'); } menuItems.push({ itemId: 'columnItem', text: me.columnsText, iconCls: me.menuColsIcon, menu: hideableColumns, hideOnClick: false }); } return menuItems; }

27 Apr 2015, 2:57 AM
Try below Override


Another solution using CSS

body > *.x-menu .x-menu-item-disabled.x-hmenu-sort-asc, body > *.x-menu div.x-menu-item-disabled.x-hmenu-sort-desc{
display: none; height: 0; margin: 0; padding: 0; visibility: hidden; width: 0;

body > *.x-menu .x-menu-item-disabled.x-hmenu-sort-asc + div.x-menu-item-disabled.x-hmenu-sort-desc + div.x-menu-item-separator{
display: none; margin: 0; padding: 0; height: 0; visibility: hidden; width: 0;