View Full Version : Can't get current row from grid to context menu

5 May 2014, 6:48 PM
Hi All,

Disclaimer: this is my first extJs app, being built with Architect 3. Remarkably easy so far! In just a few hours I have a fully functional file maintenance application. I am very impressed with the platform so far.

I decided it would be nice to add a context menu to the grid, so delete & copy record functions could be done directly in the grid instead of opening the Edit window and pressing the button there. I can get the context menu to popup exactly where it needs to, but I cannot get any of the tricks I have found online to work when trying to get the currently selected record.

I was thinking it may be an issue of scope, but not sure. Under Views I have my main form, an edit form, and a view with the context menu. Maybe there is some trick I need to use the access the grid in the main form from the context menu view? I have tried fully qualifying the grid (application.view.gridform) and that part seems to be ok, but if I try to append GetSelectionModel().GetLastSelected() it always says that GetSelectionModel() is not defined. The docs say that GetSelectionModel() should be valid, but not working. I have also tried specifying the Grid View instead of the Grid panel, but that does not work either.

Am I missing something obvious? Not sure if it matters, but all of the event code is contained as actions in a single controller module.

I will keep plugging away too...


5 May 2014, 7:08 PM
Would suggest you post the relevant code. It's difficult to say without seeing what you have.

Scott Mildenberger
6 May 2014, 6:40 AM
This is what I have in onContextMenuDeleteClick:

var record = Ext.ComponentQuery.query('#budgetGrid')[0].rec;
var unit = record.get('UNIT');
var month = record.get('BUDMONTH');
var year = record.get('BUDYEAR');

I am fairly new to ExtJs but this works for me to get the selected record.

6 May 2014, 7:05 AM
This is my code for the Edit Menu click:

onMnuEditClick: function(item, e, eOpts) {
var record = Ext.ComponentQuery.query('#rulegrid')[0].rec;
Ext.create('CX0001.view.EditRule', {
mode: 'edit',
rec: record,
title: 'Edit Rule '
This will execute, but none of the fields are populated in the EditRule view. I do not think record variable is actually being set properly by the component query because changing the title bit to this fails:
title: 'Edit Rule ' + record.get('RECNUM')

Definitely feel a step closer though - thanks!

Scott Mildenberger
6 May 2014, 7:14 AM
You could try putting a console.log(record) after setting the value of record to see what is there.

6 May 2014, 7:15 AM
A couple more bits...

Here are my Grid item DblClick and window show actions:

onRulegridItemDblClick: function(dataview, record, item, index, e, eOpts) {
Ext.create('CX0001.view.EditRule', {
mode: 'edit',
rec: record,
title: 'Edit Rule ' + record.get('RECNUM')

onRulewindowShow: function(component, eOpts) {
var ruleform = component.down('#ruleform').getForm();
if (component.mode==='edit') {
When I double-click a row in the grid, it successfully opens the window and populates all of the fields. I am assuming this is working properly because the double-click event from the grid includes the record data I need for the window as one of its parameters.

I am putting this code out here in case my assumption on the last post was incorrect and maybe the ComponentQuery was working, but my window show code is actually why none of the fields are being populated. I do not think that is the case, but trying all my options here.


6 May 2014, 7:22 AM
You could try putting a console.log(record) after setting the value of record to see what is there.

I guess this is where I am getting confused. I know the component query at least partially works, because if I change the search text to something that does not exist (for example #cruelgrid instead or #rulegrid) then I get the error that .rec cannot be read from undefined. When it is the correct value I do not get that error, but somehow the variable record remains undefined?

6 May 2014, 6:41 PM
Perhaps this working example will help?

var menu = new Ext.menu.Menu({
items: [{
text: 'Click me',

handler: function() {
// 'this' is the menu item, so grab the menu and read off the record
var name = this.parentMenu.record.get('name');

alert('Clicked: ' + name);

var grid = Ext.create('Ext.grid.Panel', {
height: 300,
renderTo: Ext.getBody(),
width: 300,

columns: [
{text: 'Name', dataIndex: 'name', flex: 1}

listeners: {
itemcontextmenu: function (view, record, item, index, ev) {
// Store the record in a property called 'record'. There's nothing special
// about calling the property 'record', it just needs to match the name
// the menu handler uses to read it off later.
menu.record = record;



store: {
fields: ['name'],

data: [
{name: 'John'},
{name: 'Peter'}

Here I reuse the same menu each time the user right-clicks. You could create a new menu each time, up to you. I've glossed over creating and destroying the menu - fully implemented the grid would create the menu internally (perhaps inside initComponent) and destroy the menu when it is itself destroyed.

7 May 2014, 8:04 PM
Part of my issue was trying to do all of this through Architect, in an MVC setup, and not knowing just how it all *should* work. I ultimately added a property to the application level to store the record object and it was all smooth sailing from there.Thanks to all for the assist. I hope to start returning favors soon!