Adding context menu to Ext JS 4 grid row

Adding context menu to Ext JS 4 grid row

Hi, in this article I will show you how you can add context menu to your grid. As you know in the desktop-type applications user very often play with context menu elements. To demonstrate this functionality I will use existing application created in this post:

Creating fullscreen Ext JS 4 app with the BorderLayout

Of course, you can create your own simple Ext.grid.Panel and it will be ok, it’s important to do something, experiments are very helpful and give bigger feedback.

In the default grid configuration context menu is disabled. You have to make some modifications and add menu component.

The simple menu for edition and removing record by row look like the following code:

       var rowMenu = Ext.create('Ext.menu.Menu', {
            height: 58,
            width: 140,
            items: [{
                text: 'Edytuj',
                icon: 'resources/icons/pencil.png'
            }, {
                text: 'Usuń',
                icon: 'resources/icons/recycleBin.png'
            }]
        });

The icon variable allow to connect icon with element, that configuration works in more than one places, for example I used the same icon for actioncolumn.

//For icons you can use style css selector by setting iconCls variable, this solution is much better. It’s more flexible and you can change settings for your icon only in one place, in your style css file but for our example I leave that. 

Now we have to inform our grid about new component, to do this I attached in the listeners object a new action.

        this.listeners = {
            itemcontextmenu: function(view, record, item, index,          e){
                e.stopEvent();
                rowMenu.showAt(e.getXY());
            }
        };

This operation set action in the view, in my case ‘DevJS.view.users.List’, the grid panel view. You can find it in the initComponent() function. If you don’t understand it, please visit this article:

Fundamental MVC in Ext JS 4 (only PL version)

The event listener for ‘itemcontextmenu’ should show your menu with elements. The result you can see below:

17-extjs4

Ok, now I will show you how you can fetch user click action:

            {
                text: 'Usuń',
                icon: 'resources/icons/recycleBin.png',
                handler: function(){
                    me.fireEvent('removeRow', this);
                }
            }

As you can see I added button handler for remove action “usuń”. The handler function fire up our event and in the standard way pass into controller action. It’s a custom grid event represented by me variable. The main action is in the controller created for our module:

    init: function () {
        var me = this;

        this.control({
            'users-list':{
                removeRow: me.removeRow
            }
        });
    },

    removeRow: function(item){
        console.log(item);

        //ask user about removing
        Ext.Msg.confirm('Potwierdź', 'Czy na pewno usunąć zaznaczony rekord?', function(button) {
            if (button === 'yes') {
                //remove...
            }
        });
    }

The controller listen custom event. In the example I clicked on remove item, Ext.Msg.confirm() asked user to confirm remove action.

18-extjs4

The remove action will execute removing process only when user click on “yes” button. P.S. of course you can translate “Yes” button label to your language but about translations I will create separate post. See you soon.

Comments:
Olly
Reply
24/11/2014 at 12:47 PM

thankyou! exactly what i needed for my table

Leave a Reply

Please fill all required fields


Drag circle to the rectangle on the right!

Send