ExtJs4 Context Menu Examples

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

[geshi lang="html5" nums="1" target="_self" ]

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 [geshi lang="javascript" nums="1" target="_self" ]

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

[geshi lang="javascript" nums="1" target="_self" ]

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

[geshi lang="javascript" nums="1" target="_self" ]

Now lets create our context menu object

[geshi lang="javascript" nums="1" target="_self" ]

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

[geshi lang="javascript" nums="1" target="_self" ]

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

ExtJS Context menu example

 

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.

[geshi lang="html5" nums="1" target="_self" ]

Now we will write our Ext.Action so that it can be fed to our Menu itemsproperty [geshi lang="javascript" nums="1" target="_self" ]

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

[geshi lang="javascript" nums="1" target="_self" ]

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.

[geshi lang="javascript" nums="1" target="_self" ]

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

 

 

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Speak Your Mind

*

CommentLuv badge