Changing Grid Header Menu

[jimmyt]

I am using the Grid component and want to add/remove some actions to the standard menu options available in the grid headers. In ColumnConfig I can see how to disable the header menus (setMenuDisable(true))
How do i get a handle to the header Menu object so I can alter/replace it?

TIA

[bclaydon]

I would love to know the way to do this too!

I need to add a "Delete" option to each column and this felt like the best way to accomplish that.

I hope we get an answer! :D

[gslender]

just add a toolbar to the containing contentpanel as per the examples - you can't modify the grid menu

[bclaydon]

Except in my case, a) I already have a toolbar above the grid so doubling them would look very odd, and b) nothing on the toolbar will be correctly aligned per column heading, especially when grid.reconfigure() alters the column widths I'm using.

So another toolar = not so useful. :/

[darrellmeyer]

You have 2 options to modify the grid header. 1) Listen for HeaderContextMenu event which gets passed the Menu, which may be altered. 2) Override GridView createContextMenu. Take a look at GridView source code for exact details.

[khashayar581]

you need to change renderUI() method in GridView.js



renderUI : function() {

var header = this.renderHeaders();
var body = this.templates.body.apply({rows:''});


var html = this.templates.master.apply({
body: body,
header: header
});

var g = this.grid;

g.getGridEl().dom.innerHTML = html;

this.initElements();

Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
this.mainHd.on("mouseover", this.handleHdOver, this);
this.mainHd.on("mouseout", this.handleHdOut, this);
this.mainHd.on("mousemove", this.handleHdMove, this);

this.scroller.on('scroll', this.syncScroll, this);
if(g.enableColumnResize !== false){
this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
}

if(g.enableColumnMove){
this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
}

if(g.enableHdMenu !== false){
if(g.enableColumnHide !== false){
this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
this.colMenu.on("itemclick", this.handleHdMenuClick, this);
}
this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});
this.hmenu.add(
{id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
{id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"},
{text: 'my desired item 1'},
{text: 'my desired item 2'},
{text: 'my desired item 3'},
{text: 'my desired item 4'},
{text: 'my desired item 5'},
{text: 'my desired item 6'},
{text: 'my desired item 7'},
{text: 'my desired item 8'},
{text: 'my desired item 9'}
)
if(g.enableColumnHide !== false){
this.hmenu.add('-',
{id:"columns", text: this.columnsText, menu: this.colMenu, iconCls: 'x-cols-icon'}
);
}
this.hmenu.on("itemclick", this.handleHdMenuClick, this);

}

if(g.enableDragDrop || g.enableDrag){
this.dragZone = new Ext.grid.GridDragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}

this.updateHeaderSortState();

}

[abhijit]

khashayar581's response was working perfectly for us upto Ext.3.2

In Ext 3.3, we had to override the afterRenderUI function


afterRenderUI : function() {

var header = this.renderHeaders();
var body = this.templates.body.apply({rows:''});


var html = this.templates.master.apply({
body: body,
header: header
});

var g = this.grid;

g.getGridEl().dom.innerHTML = html;

this.initElements();

Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
this.mainHd.on("mouseover", this.handleHdOver, this);
this.mainHd.on("mouseout", this.handleHdOut, this);
this.mainHd.on("mousemove", this.handleHdMove, this);

this.scroller.on('scroll', this.syncScroll, this);
if(g.enableColumnResize !== false){
this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
}

if(g.enableColumnMove){
this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
}

if(g.enableHdMenu !== false){
if(g.enableColumnHide !== false){
this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
this.colMenu.on("itemclick", this.handleHdMenuClick, this);
}
this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});
this.hmenu.add(
{id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
{id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"},
{text: 'my desired item 1'},
{text: 'my desired item 2'},
{text: 'my desired item 3'},
{text: 'my desired item 4'},
{text: 'my desired item 5'},
{text: 'my desired item 6'},
{text: 'my desired item 7'},
{text: 'my desired item 8'},
{text: 'my desired item 9'}
)
if(g.enableColumnHide !== false){
this.hmenu.add('-',
{id:"columns", text: this.columnsText, menu: this.colMenu, iconCls: 'x-cols-icon'}
);
}
this.hmenu.on("itemclick", this.handleHdMenuClick, this);

}

if(g.enableDragDrop || g.enableDrag){
this.dragZone = new Ext.grid.GridDragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}

this.updateHeaderSortState();

}