PDA

View Full Version : Creating right click context menu on an empty extjs grid



leonardlegaspi
8 Apr 2013, 10:32 PM
Is it possible to create a context menu on an empty extJs grid? I'm just new to ExtJS,maybe a month. I have a project that has a empty grid then the user right click the panel to add contents to the panel? Is it possible? I've been spending a day just to search it.. Hope you can help me. Since the example I've found are all with contents, how about empty ones..

Thanks a lot..

Farish
8 Apr 2013, 10:57 PM
This event works even when there are no records in the store to display in the grid:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-event-containercontextmenu

leonardlegaspi
8 Apr 2013, 11:07 PM
how to use that and how to declare it in context menu? thanks?

Farish
8 Apr 2013, 11:10 PM
Add the following listener to your grid panel:


listeners:
{
containercontextmenu: function(gridView, e, eOpts)
{
console.log("containercontextmenu");
}
},

After adding this, when you right click, you should see the message in the console window of Firebug.

leonardlegaspi
8 Apr 2013, 11:15 PM
i see the console in firebug..where should i put the context menu? can you help me? thanks :D
in the project, one must add, modify and delete the item in the grid..thanks :)

Farish
8 Apr 2013, 11:23 PM
first create a menu:


var menu_grid = new Ext.menu.Menu({
items:
[
{ text: 'Add', handler: function() {console.log("Add");} },
{ text: 'Delete', handler: function() {console.log("Delete");} }
]
});

then in the grid, add a listener for the containercontextmenu event:


listeners:
{
containercontextmenu: function(grid, e)
{
var position = e.getXY();
e.stopEvent();
menu_grid.showAt(position);
}
},

This will now stop the browser's context menu from showing when right click happens on the grid and show the menu we created at that position.

leonardlegaspi
8 Apr 2013, 11:31 PM
hi farish., thanks,,but one more thing please? how can i generate a row in the grid for the add function of the project? does it require Ext.Action? thanks once again

Farish
8 Apr 2013, 11:34 PM
In the handler function of the "Add" button in your menu, you can use store's add or insert method to add a new record in the store (which will also be displayed in the grid). i would recommend that you take a look at the examples and API documentation to get an understanding of how things work in ExtJS. that would help you a lot in the long run.