Results 1 to 8 of 8

Thread: Grid column header contextmenu

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Germany
    Posts
    59
    Answers
    2

    Default Answered: Grid column header contextmenu

    Does anybody know how to realize a contextmenu for the grids headers? The headercontainer just offers the click event, but no headercontextmenu event. Ive tried a lot not solving it.

  2. I'd extend Column:

    Code:
    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

  3. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    I saw in the column source that it adds the following events after render:
    http://docs.sencha.com/ext-js/4-0/so...-column-Column

    Code:
    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/so...ader-Container

    Code:
    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.

  4. #3
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Answers
    15

    Default

    I'd extend Column:

    Code:
    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

  5. #4
    Sencha User
    Join Date
    Sep 2010
    Location
    Germany
    Posts
    59
    Answers
    2

    Default

    Damn, wrong button! stevil > Your answer is best for me ! Thanks

  6. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Quote Originally Posted by HTK View Post
    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.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  7. #6
    Sencha User
    Join Date
    Sep 2010
    Location
    Germany
    Posts
    59
    Answers
    2

    Default

    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 Id like to know where the coordinates of the contextmenu event are. Just to improve my knowledge. Any ideas?

  8. #7
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Answers
    15

    Default

    @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

  9. #8
    Sencha User
    Join Date
    Sep 2010
    Location
    Germany
    Posts
    59
    Answers
    2

    Default

    Of course it is an EventObject , but e.getXY() is null.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •