PDA

View Full Version : [SOLVED]Using Ext.KeyMap with a grid



FoxMulder900
23 Feb 2010, 8:02 AM
I have a grid with a list of files, when a row is double clicked the file is displayed in a new window. For convenience I want to be able to view the file by pressing Enter when the row is selected, and possibly delete the file when the Delete is pressed. I have tried adding an Ext.KeyMap to my grid. However, I believe I am misunderstanding the first parameter of the KeyMap constructor as I am getting a "this.el is null" error in firebug.

I have a KeyMap defined:


var ReportKeyMap = new Ext.KeyMap(
Ext.get('ReportGrid'),
{
key: Ext.EventObject.ENTER,
fn: ViewReport,
}
);


and a grid:


xtype: 'grid',
region: 'center',
id: 'ReportGrid',
title: 'Available Reports',
keys: ReportKeyMap,
frame: true,
columns: [{header: 'Report Name', dataIndex: 'Name', sortable: true},
{header: 'Report Date', dataIndex: 'Date', sortable: true}
],
listeners:{
dblclick: ViewReport
},
viewConfig:{forceFit: true},
store: ReportStore


Any thoughts on what I am doing wrong would be much appreciated!

bclinton
23 Feb 2010, 9:53 AM
Are you sure the grid exists when you create the KeyMap? Try creating it the handler for the grid's render event.

Or, you could try setting the first parameter to "Ext.get(document)"

FoxMulder900
23 Feb 2010, 10:12 AM
I believe you are correct that the KeyMap was being created before the grid therefore the element was undefined.

I found an easy workaround, I did not realize there is already a keydown event for the grid object, I used it like this and got rid of the KeyMap entirely.



xtype: 'grid',
region: 'center',
id: 'ReportGrid',
title: 'Available Reports',
frame: true,
columns: [{header: 'Report Name', dataIndex: 'Name', sortable: true},
{header: 'Report Date', dataIndex: 'Date', sortable: true}
],
listeners:{
dblclick: ViewReport
keydown: function(e){
if(e.getKey() == Ext.EventObject.ENTER){
ViewReport()
}
}
},
viewConfig:{forceFit: true},
store: ReportStore