PDA

View Full Version : Grid column header contextmenu



HTK
17 Aug 2011, 3:54 AM
Does anybody know how to realize a contextmenu for the grid´s headers? The headercontainer just offers the click event, but no headercontextmenu event. I´ve tried a lot not solving it.

slemmon
17 Aug 2011, 12:26 PM
I saw in the column source that it adds the following events after render:
http://docs.sencha.com/ext-js/4-0/source/Column.html#Ext-grid-column-Column


me.mon(el, {
click: me.onElClick,
dblclick: me.onElDblClick,
scope: me
});



Then in the headerContainer it responds to the onClick as follows:
http://docs.sencha.com/ext-js/4-0/source/Container2.html#Ext-grid-header-Container


onHeaderClick: function(header, e, t) {
this.fireEvent("headerclick", this, header, e, t);
},


Perhaps you could iterate through the columns array after render (or include the listeners for afterrender in the config I suppose) and do the mon method then and attach a contextmenu listener there?

I haven't tested this, so not sure if I'm missing anything. Also, my proposed solution feels.... imperfect. I was almost positive I did this in Ext 3.3 and it was more elegant. Maybe there was a contextmenu event that fired on the header? I'm not jumping right to it in the API docs for 3, so maybe I'm wrong.

stevil
17 Aug 2011, 1:39 PM
I'd extend Column:




Ext.define('My.Column', {
extend: 'Ext.grid.column.Column',
alias: 'widget.mygridcolumn',

initComponent: function() {
var me = this;

me.callParent();
me.addEvents('headercontextmenu');
},

afterRender: function() {
var me = this,
el = me.el;

me.callParent(arguments);

me.mon(el, {
contextmenu: me.onElContextMenu,
scope: me
});
},

onElContextMenu: function(e, t, options) {
var me = this;

// I'm adding "me" to pass the column object as part of the event
me.fireEvent('headercontextmenu', me, e, t, options);
}
});



I just cobbled this together - it's untested, but should be pretty close to what you need.

Then, when creating your column config, use "xtype: 'mygridcolumn'," to make the column use your extension.

Now, if you need this across all manner of Column children, you may be in better shape doing an Ext.override() on Column, pasting in all of afterRender from Column into your override, adding your handler to the me.mon() call, overriding initComponent to add your custom event, and then add the context menu handler from above and fire the event. Then anything extending Column gets this behavior. Your call.

stevil

HTK
19 Aug 2011, 12:07 AM
Damn, wrong button! stevil > Your answer is best for me ! Thanks

mitchellsimoens
25 Aug 2011, 7:15 AM
Damn, wrong button! stevil > Your answer is best for me ! Thanks

There should be a reset answer link where the best answer is displayed. I have clicked it to reset so you can mark whatever you want.

HTK
26 Aug 2011, 1:11 AM
Hi stevil. Your code helped. The only problem that still persists is, that my event e does not have the xy coordinates of the context click. I used the XY coordinates of the header el and added +20 to the Y coordinate to place it nicely under the column. But I´d like to know where the coordinates of the contextmenu event are. Just to improve my knowledge. Any ideas?

stevil
31 Aug 2011, 11:48 AM
@HTK - how did you try to get the xy coordinates? "e" is an Ext.EventObject, so you may need to try e.getXY(), as opposed to e.xy...

stevil

HTK
31 Aug 2011, 10:52 PM
Of course it is an EventObject :), but e.getXY() is null.