ExtJS 6.x - Disable Grid Header Menu - extjs

Question

I'm building an ExtJS 6 app which has a lot of Grids built from a general class. This general class sets the Grid Header menu as enabled by default, but sometimes I need it to be disabled, and I don't know how to do that.
This is the class that builds the main grid configuration on which all other grids should be based on (and which I am not allowed to modify):
Ext.define('App.view.override.TMainBrowseGrid', {
override: 'App.view.TMainBrowseGrid',
initComponent: function () {
/* [A LOT OF IRRELEVANT CODE HERE] */
var oBuildCol = {};
/* [MORE OF IRRELEVANT CODE HERE] */
oBuildCol = {
xtype: cTipoCol,
itemId: (oCol.cSQLField === '' ? (oCol.cFieldName === '' ? null : oCol.cFieldName) : oCol.cSQLField),
dataIndex: (oCol.cSQLField === '' ? oCol.cFieldName : oCol.cSQLField),
text: oIdioma.Get(oCol.Header),
hidden: (oCol.lVisible == true ? false : true),
hideable: true,
sortable: false,
draggable: true,
align: oViewModel.getFormulas().getHeaderAlign(oCol.nAlignment),
tdCls: 'oGridCell-' + oViewModel.getFormulas().getCellAlign(oCol.nAlignment),
width: oCol.nWidth,
flex: (oCol.nWidth == 999 ? 1 : 0),
minWidth: (oCol.nWidth == 999 ? 140 : 40),
cCode: oCol.SrcOnGetData,
summaryType: oTipoSummary,
summaryRenderer: (oTipoSummary !== null ? Function('val', 'params', 'data', 'return "<b>"+val+"</b>";') : null),
renderer: (oCol.SrcOnGetData === '' ? false : function (value, metaData, record, rowIndex, colIndex, store, view) {
if (typeof metaData.column == 'undefined') {
if (typeof value == 'undefined') {
return '';
}
else {
return value;
}
}
var cCode = metaData.column.cCode;
if (cCode.length !== 0) {
eval(cCode);
}
return value;
})
};
/* [EVEN MORE IRRELEVANT CODE HERE !!! ] */
this.callParent();
}
});
And this my View code:
Ext.define('App.view.TFormFrm', {
extend: 'Ext.tab.Panel',
alias: 'widget.TFormFrm',
requires: [
'App.view.TFormFrmViewModel',
'App.view.TFormFrmViewController',
'Ext.tab.Tab',
'Ext.grid.Panel',
'Ext.grid.column.RowNumberer',
'Ext.view.Table',
'Ext.toolbar.Paging',
'App.view.XBrowseColumn',
'App.model.oGridForm',
'App.model.oGridActs',
'Ext.grid.plugin.DragDrop',
'Ext.selection.RowModel'
],
config: {
nNivel: 0,
cAwp: 'TGlobalData',
cCodClass: 'FormBrw'
},
controller: 'TFormFrm',
viewModel: {
type: 'TFormFrm'
},
cls: 'CustomTabs',
activeTab: 0,
itemId: 'TFormFrm',
bind: {
title: '{lbl_Form}'
},
titleAlign: 'center',
deferredRender: false,
listeners: {
afterrender: 'onTFormFrmAfterRender'
},
items: [
{
xtype: 'panel',
itemId: 'oMainPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
bind: {
title: '{lbl_Form}'
},
tabConfig: {
hidden: true
},
dockedItems: [
{
xtype: 'XActionToolbarFrm',
flex: 1,
dock: 'top',
itemId: 'oGridToolbar',
/* [IRRELEVANT CODE HERE] */
}
],
items: [
{
xtype: 'panel',
flex: 1,
itemId: 'oPnlCard',
layout: {
type: 'card',
deferredRender: false
},
items: [
{
xtype: 'panel',
itemId: 'oPnlContenedor',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'TMainBrowseGrid',
cBrwName: 'oBrwForm',
cCodForm: 'FormFrm',
alignOnScroll: false,
scrollable: true,
menuDisabled: true,
cls: 'CustomGrid',
itemId: 'oGridForm',
bind: {
store: '{oStoreForm}'
},
columns: [
{
xtype: 'rownumberer',
hidden: true
}
],
dockedItems: [
{
xtype: 'TPagingTB',
dock: 'bottom',
bind: {
store: '{oStoreForm}'
}
}
],
listeners: {
select: 'onFormSelect'
}
},
{
xtype: 'TMainBrowseGrid',
cBrwName: 'oBrwActs',
cCodForm: 'ActsFrm',
alignOnScroll: false,
scrollable: true,
cls: 'CustomGrid',
itemId: 'oGridActs',
bind: {
store: '{oStoreActs}'
},
columns: [
{
xtype: 'rownumberer',
hidden: true
}
],
dockedItems: [
{
xtype: 'TPagingTB',
dock: 'bottom',
bind: {
store: '{oStoreActs}'
}
}
],
listeners: {
afterrender: 'onOGridActsAfterRender'
}
}
]
}
]
}
]
}
]
});
I've tried to set the menuDisabled: true setting almost everywhere in the View, but it doesn't seem to work. How should I deal with this?
Thank you very much.

Answer 1

If you want to disable all headers, use enableColumnHeaders on the grid itself.