PDA

View Full Version : How to pass record (selected with right click) to a menu item in context menu?



netemp
31 Oct 2011, 10:43 PM
I have a grid with context menu.

I need to pass the current selected record (the record at which the context menu has been invoked using mosue right click) to handler of a menu item.

Following is a sample code I am using:



Ext.onReady(function () {

//Defining the action for context menu to which record has to be passed
var editAction = Ext.create('Ext.Action', {
text: 'Edit this record',
handler: function() {
console.log('in handler'+selRecord);//This is undefined as selRecord is not in the scope
var rec2 = grid.getSelectionModel().getSelection()[0];//This gives the record selected with left click
}
});

//Defining the context menu
var contextMenu = Ext.create('Ext.menu.Menu', {
items: [
editAction
]
});

//Sample data for the grid
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am']
];


// Data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}, {
name: 'change',
type: 'float'
}, {
name: 'pctChange',
type: 'float'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'n/j h:ia'
}],
data: myData
});


//Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [{
text: 'Company',
//locked : true,
width: 200,
sortable: true,
dataIndex: 'company',
locked: true
}, {
text: 'Price',
width: 125,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
}, {
text: 'Change',
width: 125,
sortable: true,
dataIndex: 'change'
}, {
text: '% Change',
width: 125,
sortable: true,
dataIndex: 'pctChange'
}, {
text: 'Last Updated',
width: 135,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
height: 350,
width: 600,
title: 'Grid Context Menu',
renderTo: Ext.getBody(),
viewConfig: {
stripeRows: true,
listeners: {

itemcontextmenu: function(view, selRecord, node, index, e) {
console.log('in listener '+selRecord);//This gives the record selected with right click
e.stopEvent();
contextMenu.showAt(e.getXY());
return false;
}

}
}
});
});


If we use grid.getSelectionModel().getSelection()[0] then this gives the record selected with left mouse click and not the one at which contextmenu has been invoked.

Thus, how could such a record be accessed in the handler?

Could anyone guide at this?

Thanks in advance.

PS: I am using ExtJS 4.0.7

netemp
1 Nov 2011, 12:16 AM
I have been able to locate a workaround for this.

I am forcefully making the record at which the context menu has been invoked as also the selected record for the grid. I am writing the following line in the itemcontextmenu:



grid.getSelectionModel().select(selRecord);


This sets the record at which the context menu has been invoked as also the currently selected record. And then this records can be accessed from the handler using:




grid.getSelectionModel().getSelection()[0];


Hope this helps someone looking for the same.

netemp
2 Nov 2011, 9:59 PM
Though, I have currently implemented a work around for making the record at which the context menu is invoked as also the selected record in the grid.

But I was just wondering that should this not be a default behavior? That is, whenever a user right clicks a record to invoke context menu, then that record also becomes the currently selected record of that grid. As otherwise, there are two records which are displayed as highlighted.

Any thoughts on this anyone?

TIA.

redraid
3 Nov 2011, 2:31 AM
var editAction = Ext.create('Ext.Action', {
text: 'Edit this record',
handler: function() {
console.log('Action on %o record', this.record);
}
});

itemcontextmenu: function(view, selRecord, node, index, e) {
console.log('in listener '+selRecord);//This gives the record selected with right click
e.stopEvent();
editAction.record = selRecord; // Save reference to selRecord
contextMenu.showAt(e.getXY());
return false;
}

netemp
3 Nov 2011, 3:06 AM
Thanks for the post Redraid.

The issue related to using

editAction.record = selRecord; is that if I have ten or may be more menu items in my context menu then I shall have to write this separately for every one.

Instead of this, I shall prefer the same method of setting the current record as also the selected one using select method of selectionModel.

But I still feel that this behavior should be default, so that when user invokes the context menu at a record, then that record also becomes the currently selected one, as otherwise, user also gets to see two records highlighted.

redraid
3 Nov 2011, 3:11 AM
t if I have ten or may be more menu items in my context menu then I shall have to write this separately for every one.

you can save reference to grid:

grid.contextMenuRecord = selRecord; // Save reference to selRecord
and then use this reference:


console.log('Context menu record %o', grid.contextMenuRecord);

netemp
3 Nov 2011, 3:18 AM
Great, this is good option. But do you find any issue in setting the same record as selected one too?

Also, would this not be confusing for the user if he finds that right-clicking a record is not setting it as the selected record and there are two records which user can see as highlighted one?

redraid
3 Nov 2011, 3:22 AM
IMHO right click with context menu must select record