Results 1 to 8 of 8

Thread: Creating right click context menu on an empty extjs grid

  1. #1

    Default Answered: Creating right click context menu on an empty extjs grid

    Is it possible to create a context menu on an empty extJs grid? I'm just new to ExtJS,maybe a month. I have a project that has a empty grid then the user right click the panel to add contents to the panel? Is it possible? I've been spending a day just to search it.. Hope you can help me. Since the example I've found are all with contents, how about empty ones..

    Thanks a lot..

  2. This event works even when there are no records in the store to display in the grid:

    http://docs.sencha.com/ext-js/4-0/#!...nercontextmenu

  3. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    This event works even when there are no records in the store to display in the grid:

    http://docs.sencha.com/ext-js/4-0/#!...nercontextmenu

  4. #3

    Default

    how to use that and how to declare it in context menu? thanks?

  5. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    Add the following listener to your grid panel:

    Code:
    listeners:
                    {
                        containercontextmenu: function(gridView, e, eOpts)
                        {
                                console.log("containercontextmenu");
                        }
                    },
    After adding this, when you right click, you should see the message in the console window of Firebug.

  6. #5

    Default

    i see the console in firebug..where should i put the context menu? can you help me? thanks
    in the project, one must add, modify and delete the item in the grid..thanks

  7. #6
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    first create a menu:

    Code:
    var menu_grid = new Ext.menu.Menu({
            items: 
            [
                { text: 'Add', handler: function() {console.log("Add");} },
                { text: 'Delete', handler: function() {console.log("Delete");} }
            ]
        });
    then in the grid, add a listener for the containercontextmenu event:

    Code:
    listeners:
                    {
                        containercontextmenu: function(grid, e)
                        {
                            var position = e.getXY();
                            e.stopEvent();
                            menu_grid.showAt(position);
                        }
                    },
    This will now stop the browser's context menu from showing when right click happens on the grid and show the menu we created at that position.

  8. #7

    Default

    hi farish., thanks,,but one more thing please? how can i generate a row in the grid for the add function of the project? does it require Ext.Action? thanks once again

  9. #8
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    In the handler function of the "Add" button in your menu, you can use store's add or insert method to add a new record in the store (which will also be displayed in the grid). i would recommend that you take a look at the examples and API documentation to get an understanding of how things work in ExtJS. that would help you a lot in the long run.

Tags for this Thread

Posting Permissions

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