ExtJs4 Context Menu Examples

• Tweet

• Tweet

Hi Guys,

So with my current project I did this couple of times and I though may be before I forget how to do it again I better document it somewhere and what better place than this website? Atleast this post will serve a reference to me and could help someone looking for exact same information.

Alright Enough of chit chat and lets get to the job in hand. I will show you how to do contect menus both in a Grid and with a HTML element such as DIV.

A demo is available from another site of mine called DemoPill.com, A link is provided at the end of this article (Funny Eh!!)

First up lets do context menus with Grid.

ExtJs Context Menu With Grid

HTML markup for this Demo

   <div id="playcontainer" style="margin:50px">This string will be replaced</div>
  <div id="contextMenuGridExample" style="margin:50px">
  </div>

It all will make sense in a while. Just keep an eye on the container IDs

Ok now that the Markup has been taken care of, we need data to display in the Grid right? So lets use an array store with some hard coded data

var gridData = [
        ['Jaspreet'],
        ['Chahal'],
        ['Yuvraaj']
    ];

Now lets create a Array Store that will be used by our Grid in a while.

var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'name'}
        ],
        data: gridData // we are feed our array data here
    });

Now that we have our store ready lets put our Context menu together. A context Menu has various Menu Items which respond to user Action such as Mouse Click. So we will create a Action Handler for our Context Menu

var replaceAction = Ext.create('Ext.Action', {
        text: 'Replace above text with selected value',
        handler: function(widget, event) {
            var rec = grid.getSelectionModel().getSelection()[0];
            if (rec) {
                // here we are replacing innerHTML of our container with ID playcontainer
                Ext.get("playcontainer").update(rec.get('name'));
            } else {
                alert('Please select a name from the grid');
            }
        }
    });

Now lets create our context menu object

var gridContextMenu = Ext.create('Ext.menu.Menu', {
        items: [
            // we are feeding our declared actions to Context Menu Items array
            replaceAction
        ]
    });

So hopefully you are still with me right? Nothing much has happened as yet. What we did uptil now is

- wrote our markup
- create a DATA array
- created a array STORE
- create an Ext Action
- Fed Ext action to Ext.menu.Menu

Ok lets move on and create our Grid Object

var grid = Ext.create('Ext.grid.Panel', {
        store: store, // our array store is Fed
        columns: [
            {
                text     : 'Something Random',
                flex     : 1,
                dataIndex: 'name' // remember that dataIndex value should be named exactly what you declared in your store
            }
        ],
        viewConfig: {
            listeners: {
                itemcontextmenu: function(view, rec, node, index, event) {
                    event.stopEvent(); // stops the default event. i.e. Windows Context Menu
                    gridContextMenu.showAt(event.getXY()); // show context menu where user right clicked
                    return false;
                }
            }
        },
        height: 350,
        width: 400,
        title:'context Menu Grid Example',
        renderTo: 'contextMenuGridExample', // remember this is from Markup that we included earlier
        stateful: false
    });

That’s it. You will see something like this on screen

 

Now lets see how we can do exact same thing with say a DIV container. I mean calling a Context Menu when someone right click on you DIV element.

 

Advertisement

 

ExtJS Context Menu on DIV

Ok so first up is Markup. On you page put this code somewhere.

<div style="padding:15px;background:#EEE;border:3px solid #AAA;border-radius:10px;color:#000;width:500px;margin:50px" id="elementContextMenu">Right click here</div>

Now we will write our Ext.Action so that it can be fed to our Menu itemsproperty

var removeAction = Ext.create('Ext.Action', {
        text: 'Remove this element, because I don\'t like it',
        handler: function(widget, event) {
            if(confirm("This element will be removed from DOM. You will need to refresh your browser to make it reappear. Continue?")) {
                Ext.get("elementContextMenu").remove();    
            }
            return false;
        }
    });

That’s pretty much what we have done above. The only code I’ve removed is the one that was related to Grid and added a line that will remove our DIV element from DOM (document object model)

Now lets create our Context Menu object

var contextMenu = Ext.create('Ext.menu.Menu', {
        items: [
            removeAction
        ]
    });

Now lets bind contextmenu event to our DIV, this is done so that when user right clicks on our DIV a context menu is shown.

Ext.onReady(function() {
        Ext.get("elementContextMenu").on("contextmenu",function(event,element){
            event.stopEvent();
            contextMenu.showAt(event.getXY());
            return false;
        })
 });

That’s pretty much it.

To see above example in action you can browse to Demo Pill here

http://jaspreetchahal.org/examples/extjs-context-menu-example.html

I hope that this post was helpful

Cheers,

ExtJS 4 API docs

http://docs.sencha.com/ext-js/4-1

Advertisement