EXTJS in XPages #16 – Right Click Context Menus

In this article I will discuss and demonstrate how to create a context menu so that when a user right clicks on  grid they are able to take action.

EXTJS in XPages series
Here are links to all of the previous articles in this series

Demonstration
The EXTJS in XPages demonstration database can be found at http://demo.xomino.com/xomino/Extjs.nsf/xBufferedRendererContextMenu.xsp

Download
The sample database that will accompany this series is available from the menu in the live demo database from this link – http://demo.xomino.com/xomino/Extjs.nsf

Introduction

Context menus (right click menu) are one form of user experience which “reduces clicks”. But that is a fallacy in some senses because the user is not clicking any less they are just less annoyed by the clicks🙂

If the user is in a grid and has to select some documents, then move their mouse out of the grid and click an “Approve” button that is “one click” but “with an annoying mouse movement”. Right click – select Approve is actually two clicks…..which is more clicks but is less annoying because of little to no mouse movement.

r1

How does that work?

In the grid we are able to create a context menu by “Creating a menu” and “adding it to the onContextMenu event of the grid view. In the example below I am creating the “approveAction”. In that action we:

  • define the icon which will appear int he menu
  • define the text on the menu action
  • have a handler which interprets what happens when the menu action is clicked
    • In this case the action gets all the selected documents and creates a JSON string from it
    • That JSON string is then shown on the console for debugging
var approveAction = Ext.create('Ext.Action', {
    icon   : 'images/add.png',  // Use a URL in the icon config
    text: 'Approve Users',
    disabled: false,
    handler: function(widget, event) {
        var selection = Ext.getCmp('myPanel').getSelectionModel().getSelection();

    	var theJSON=[]
    	for ( var i = 0; i < selection.length; i++) {
    		theJSON.push({'unid': selection[i].data["@unid"],
    						'field': 'status',
    						'val': 'approved'}
    		)
    	}
    	console.dir(theJSON)
    }
})

I will get to writing about how to do the update like I promised……but suffice to say that this is posted at a customREST control which will then update the values based on the UNID.

r2

The menu is added to the grid in the following manner. A view listener is added to the grid and in the itemcontextmenu event we detect where the event is happening and then display the menu at exactly that point (you could offset this if you wanted)

The menu is smart enough that if you do not click on the menu itself it disappears when you click away from it.

gridFunc = {
    self: this,
    grid: function(){
	  return Ext.getCmp('myPanel')
    },
    contextMenu: Ext.create('Ext.menu.Menu', {
        items: [
                approveAction,
                rejectAction
        ]
    })
}

var grid = Ext.create('Ext.grid.Panel', {
    	viewConfig: {
    		stripeRows: true,
	        listeners: {
	            itemcontextmenu: function(view, rec, node, index, e) {
	                e.stopEvent();
	                gridFunc.contextMenu.showAt(e.getXY());
	                return false;
	            }
	        }
	    },
etc

Reusing the actions

Not only can the actions be added to the context menu, but because they are created as EXT Objects they can be added to other place as well – like a toolbar

	gridDock = [{
		id: 'activeStorePaging',
	     xtype: 'toolbar',
	     dock: 'bottom',
		 items: [
		   {
		       text: 'Clear Filter Data',
		       handler: function () {
		           grid.filters.clearFilters();
		       }
		   },
		   '-',
		   approveAction,
		   '-',
		   rejectAction
	    ]
	 }]

r3

Conclusion

As you can see with great control and little additional effort (as ever!) we are able to add more feature rich functionality to our grid

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s