Adding Context Menu support to a standard Table Cell

March 10th, 2010
  • Ok, I have been looking over all of the examples and the API, but I find myself not getting the information I need. I am trying to create a context menu whne a user clicks a table cell in an application. I can create the menu no problem, the issue seems to be how I am adding a listener. If anyone can provide a very simple method for calling a menu from a normal table cell and not another ExtJS object it would be appreciated.


  • Thank you for your reply. I did look at the function, but it looks like it on;y pertains to the Grid object. Is that not the case?

    Here is the code that I am trying to use.


    var menu = new Ext.menu.Menu({
    id: 'mainMenu',
    items: [
    {
    text: 'Menu 1',
    checkHandler: onMenuClick
    },
    {
    text: 'Menu 2',
    checkHandler: onMenuClick
    },
    {
    text: 'Menu 3',
    checkHandler: onMenuClick
    }]});

    var ls = new Ext.util.on('contextmenu',show_menu,'mytest');

    function onMenuClick() {

    alert("Click");
    }







    Cell


  • Yeah, I try to do that. Only sometimes if I'm feeling stressed, it ends up being the "whip the man with a fishing rod until he falls in the river" approach:))


  • I assume you are adding a listener to this event: http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel&member=cellcontextmenu

    Show us your code, and describe how it's going wrong and we'll be able to put you on the right track.


  • http://extjs.com/learn/Manual:Intro:Event_Handling


  • A good and necessary approach sometimes. :D


  • You need to go back to some tutorials on Javascript and Ext before you start working up an app.

    "new Ext.util.on" is almost random!


  • Thank you fro the direction. I was able to figure it out a lot better with your help. I don't know why I didn't read into the event hander parts.

    I changed the code to the following...


    function show_menu() {

    var menu = new Ext.menu.Menu({
    id: 'mainMenu',
    items: [
    {
    text: 'Menu 1',
    handler: onMenuClick
    },
    {
    text: 'Menu 2',
    handler: onMenuClick
    },
    {
    text: 'Menu 3',
    handler: onMenuClick
    }]});
    menu.show('mytest');
    return false;
    }

    var ls = Ext.get('mytest');
    ls.on('contextmenu',show_menu,this,{preventDefault : true});

    function onMenuClick() {

    alert("Click");
    }


    and it works without a hitch. Thanks again for pointing me in the right direction. I have to say I really to like the approach you all take on here. You follow the "Give the man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime" approach. I learned a lot more than if someone had just given me the code.







  • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Adding Context Menu support to a standard Table Cell , Please add it free.