1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    91
    Vote Rating
    0
    TheBigOnion is on a distinguished road

      0  

    Default Gridpanel: Contextmenu / right-click menu

    Gridpanel: Contextmenu / right-click menu


    Hello,
    I have a form with two panes. The left pane has a tree on it. I put a context menu on the tree and it works great. On the left pane I have a grid. I have tried to put a context menu on the grid, but it never shows up with the user right clicks. Below is my code. Could someone please help me? Can you point out my error? Or point me in the direction of a working example?




    Code:
    Ext.my.grid.grid_control = new Ext.grid.GridPanel({
        anchor: '0 100%',
        border: false,
        enableDrag: true,
        ddGroup : 'nodeMove',
        view: new Ext.grid.GroupingView({
            emptyText: 'This is empty.',
            forceFit: true,
            showGroupName: false,
            enableNoGroups: true
        }),
        ds: Ext.my.grid.ds,
        cm: Ext.my.grid.cm,
        listeners: {
            'rowClick': function () {
                do_buttons();
            },
            'cellcontextmenu': function(e) {
                node.select();
                Ext.my.grid.context_menu.node = node;
                Ext.my.grid.context_menu.show(e.getTarget());
            }
        }
    });
    
    Ext.my.grid.context_menu = new Ext.menu.Menu({
        id: 'context_menu',
        items: [{
            text: 'New File',
            iconCls: 'new_directory_button',
            handler: do_new_directory
        },{
            text: 'Rename File',
            iconCls: 'rename_directory_button',
            handler: do_rename_directory
        }]
    });

  2. #2
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    905
    Vote Rating
    40
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      1  

    Default


    Try itemcontextmenu, and make sure you preventDefault else the browser will grab it:
    PHP Code:
        listeners: {
            
    /**
             * Prevents the browser handling the right-click on the control.
             */
            
    containercontextmenu: function(viewe) {
                
    // Stop the browser getting the event
                
    e.preventDefault();
            },

            
    /**
             * Prevents the browser handling the right-click on the control.
             */
            
    contextmenu: function(eelementoptions) {
                
    // Stop the browser getting the event
                
    e.preventDefault();
            },

            
    /**
             * Prevents the browser handling the right-click on the control.
             */
            
    itemcontextmenu: function(viewrecorditemindexe) {
                
    // Stop the browser getting the event
                
    e.preventDefault();
            }
        }, 

  3. #3
    Sencha User
    Join Date
    Feb 2010
    Posts
    91
    Vote Rating
    0
    TheBigOnion is on a distinguished road

      0  

    Default


    I took out what I had, and put that in, now nothing shows up when I right click. Not the default, and not mine. What did I do wrong?

    Thanks....Michael

    Quote Originally Posted by westy View Post
    Try itemcontextmenu, and make sure you preventDefault else the browser will grab it:
    PHP Code:
        listeners: {
            
    /**
             * Prevents the browser handling the right-click on the control.
             */
            
    containercontextmenu: function(viewe) {
                
    // Stop the browser getting the event
                
    e.preventDefault();
            },

            
    /**
             * Prevents the browser handling the right-click on the control.
             */
            
    contextmenu: function(eelementoptions) {
                
    // Stop the browser getting the event
                
    e.preventDefault();
            },

            
    /**
             * Prevents the browser handling the right-click on the control.
             */
            
    itemcontextmenu: function(viewrecorditemindexe) {
                
    // Stop the browser getting the event
                
    e.preventDefault();
            }
        }, 

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,240
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    The problem is that you aren't positioning the menu before showing it.

    You should use the following code instead:
    Code:
       Ext.my.grid.context_menu.showAt(e.getXY());
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Feb 2010
    Posts
    91
    Vote Rating
    0
    TheBigOnion is on a distinguished road

      0  

    Default


    Hi, I'm not sure where I was suppose to put that, but it did not work. Could you take my code I posted and put it together with something that works?

    Thanks so much.



    Quote Originally Posted by aconran View Post
    The problem is that you aren't positioning the menu before showing it.

    You should use the following code instead:
    Code:
       Ext.my.grid.context_menu.showAt(e.getXY());

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,240
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Take a look at:
    http://dev.sencha.com/deploy/ext-4.0...tion-grid.html

    We subscribe to itemcontextmenu and then use the event's XY coordinates to position the context menu.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha User
    Join Date
    Feb 2010
    Posts
    91
    Vote Rating
    0
    TheBigOnion is on a distinguished road

      0  

    Default


    Ok, I changed my code to match the example but it still does not work. Here is my code:

    Code:
    Ext.my.grid.context_menu = new Ext.menu.Menu({
        id: 'context_menu',
        items: [{
            text: 'New File',
            iconCls: 'new_directory_button',
            handler: do_new_directory
        },{
            text: 'Rename File',
            iconCls: 'rename_directory_button',
            handler: do_rename_directory
        }]
    });
    
    Ext.my.grid.grid_control = new Ext.grid.GridPanel({
        anchor: '0 100%',
        border: false,
        enableDrag: true,
        ddGroup : 'nodeMove',
        view: new Ext.grid.GroupingView({
            emptyText: 'This is empty.',
            forceFit: true,
            showGroupName: false,
            enableNoGroups: true
        }),
        ds: Ext.my.grid.ds,
        cm: Ext.my.grid.cm,
        listeners: {
            'rowClick': function () {
                do_buttons();
            },
            'itemcontextmenu': function(e) {
                e.stopEvent();
                Ext.my.grid.context_menu.showAt(e.getXY());
                return false;
            }
        }
    });

  8. #8
    Sencha User
    Join Date
    Feb 2010
    Posts
    91
    Vote Rating
    0
    TheBigOnion is on a distinguished road

      0  

    Default


    Anyone?

  9. #9
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    905
    Vote Rating
    40
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    How does it not work exactly? That's not really much info to go on is it...

    I'd guess that it errors with stopEvent or getXY is not a function, since it looks like your interface for itemcontextmenu is wrong.

    When in doubt I find it best to put a breakpoint in, or a log statement and look at the arguments; you're certainly going to have to get into the habit of doing that if you want to develop in Ext!

    In case you do not know every javascript function call sets an arguments variable that you can look at to see what was passed to the function (regardless of what parameters you have 'defined' on your version).

    Here's the interface for itemcontextmenu, again:
    Code:
    itemcontextmenu: function(view, record, item, index, e)

  10. #10
    Sencha User
    Join Date
    Feb 2010
    Posts
    91
    Vote Rating
    0
    TheBigOnion is on a distinguished road

      0  

    Default


    Yes, sorry I had changed my interfaced to look like the one you have there. But it still does not work. When I right click on an item in the grid nothing happens. Not default menu, not custom menu. Just nothing.

    How do I put a break point or log point in? And what variable should I be looking at?

Similar Threads

  1. Gridpanel: Contextmenu / right-click menu
    By jlg in forum Ext: Discussion
    Replies: 1
    Last Post: 15 Mar 2011, 3:09 AM
  2. GridPanel column headers-right click menu question
    By memills in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 7 Jul 2009, 7:37 AM
  3. [1.2.3] Browser's right click menu pops up with ContextMenu
    By seast in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 1 Mar 2009, 11:32 PM
  4. One-click drown down menu in GridPanel
    By jdobrowski in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 29 Apr 2008, 1:29 PM
  5. Replies: 0
    Last Post: 3 Mar 2008, 1:46 PM

Thread Participants: 4

Tags for this Thread