Very basic example with running code for ContextMenu with menu action on ExtJS 5.1.0
Along with one workaround solution for a bug that is there in Extjs 5.1. Bug is:
If you right click on any row then you will get context menu, now if you click on any other row that context menu does not go off, still showing.
First Code Example for Context Menu in ExtJS 5.1.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>ExtJS 5 Context Menu</title>
<link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
<script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
<style>
.x-grid-item-selected .x-grid-cell {
background-color: #B3D4FF !important;
color :#000000 !important;
}
</style>
<script>
var resultGrid = null;
Ext.onReady(function(){
Ext.define('Student',{
extend: 'Ext.data.Model',
fields:[
{name: 'id'},
{name: 'name'},
{name: 'mobile'}
]
});
var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
pageSize: 7,
data:[
{id:'1', name:'Binod', mobile:'9900999000'},
{id:'5', name:'Ben', mobile:'9902899999000'},
{id:'3', name:'Sergei', mobile:'903599999000'},
{id:'4', name:'Steve 4', mobile:'999988885'},
{id:'5', name:'Adam 5', mobile:'999988885'},
{id:'6', name:'Matt 6', mobile:'999988885'},
{id:'7', name:'Huge 7', mobile:'999988885'},
{id:'8', name:'McDonald 8', mobile:'999988885'},
{id:'9', name:'Prasad', mobile:'999988885'},
{id:'10', name:'Pramod', mobile:'999988885'},
{id:'11', name:'Arnab', mobile:'999988885'},
{id:'12', name:'Soumya', mobile:'999988885'}
]
});
this.resultGrid = Ext.create('bin.com.ResultGrid',{
renderTo: Ext.getBody(),
store: studentStore,
listeners: {
itemcontextmenu: 'forContextMenu'
}
});
});
var showRoll = function(){
var allSelectedRecord = resultGrid.getView().selModel.getSelection();
alert("Roll : "+allSelectedRecord[0].get('id'));
}
var showSelectedRecord = function(){
var allSelectedRecord = resultGrid.getView().selModel.getSelection();
alert("Name : "+allSelectedRecord[0].get('name')+"\n"+"Mobile :"+allSelectedRecord[0].get('mobile'));
}
var resultGrid = Ext.define('bin.com.ResultGrid',{
extend: 'Ext.grid.Panel',
width: 400,
height: 200,
title: 'Student Records',
plugins: 'gridfilters',
columns:[
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
],
forContextMenu : function(view, record, node, index, e) {
e.stopEvent();
gridContextMenu.showAt(e.getXY());
return false;
},
initComponent: function () {
this.selModel = new Ext.selection.CheckboxModel( {
});
this.callParent(arguments);
}
});
var gridContextMenu = Ext.create('Ext.menu.Menu', {
margin: '0 0 10 0',
items: [{
text: 'Show Details',
handler : showSelectedRecord
},
{
text: 'Show Roll',
handler : showRoll
}],
listeners: {
mouseleave: function() {
gridContextMenu.hide();
}
}
});
</script>
</head>
</html>