PDA

View Full Version : Replace TAB key functionality in EditorGridPanel



leowyatt
23 Nov 2010, 3:48 AM
Hi,

I've created an editable grid which currently I use a button to create a new row. What I'd like to achieve is when the user reaches the last column in the grid and presses the TAB key the grid will insert a new record automatically.

Given my limited understanding on Extjs I'm thinking I need to attach a listener to the cell so that when the tab key is pressed it can run the code I've written to generate the new row.

Is that the best way to go about this?

Condor
23 Nov 2010, 3:58 AM
No, Tab handling is done by the onEditorKey method of the selection model.

You will have to override this method to implement what you are looking for.

leowyatt
23 Nov 2010, 4:34 AM
No, Tab handling is done by the onEditorKey method of the selection model.

You will have to override this method to implement what you are looking for.

ok thanks, will have a look into that. I'm assuming overriding stuff is the same in Extjs as it is in other languages. Extend the selection model and overload the onEditorKey method?

Condor
23 Nov 2010, 4:43 AM
You mean override. Javascript doesn't support overloading.

Have a look at the Ext.extend method in the API docs.

leowyatt
23 Nov 2010, 5:15 AM
You mean override. Javascript doesn't support overloading.

Have a look at the Ext.extend method in the API docs.

thanks will have a look

leowyatt
23 Nov 2010, 5:34 AM
Just to clarify I'm going to want to do something like this;




Ext.namespace('line.editor');

line.editor = Ext.extend(Ext.grid.RowSelectionModel,{

onEditorKey: function(){

//perform row code
}


});

Condor
23 Nov 2010, 5:42 AM
1. Your namespace is 'line' and not 'line.editor'.
2. You either have to copy and modify the RowSelectionModel onEditorKey source in your own onEditorKey method or call the superclass onEditorKey method (since this is rather complex operation you'll probably need to first one).

leowyatt
23 Nov 2010, 5:49 AM
1. Your namespace is 'line' and not 'line.editor'.
2. You either have to copy and modify the RowSelectionModel onEditorKey source in your own onEditorKey method or call the superclass onEditorKey method (since this is rather complex operation you'll probably need to first one).


ok so




Ext.namespace('line');

line = Ext.extend(Ext.grid.RowSelectionModel,{

onEditorKey: function(field,e){
if(e.getKey() == e.TAB){

//if field is last column
/*do new line code*/
//else
this.handleKeyDown(e);
}
}
});

on second thoughts shouldn't it be the cellselectionmodel instead of the rowselectionmodel?



Ext.namespace('line');

line = Ext.extend(Ext.grid.CellSelectionModel,{

onEditorKey: function(field,e){
if(e.getKey() == e.TAB){

//if field is last column
/*do new line code*/
//else
this.handleKeyDown(e);
}
}

});

Condor
23 Nov 2010, 5:57 AM
Almost:

Ext.ns('MyNamespace');
MyNamespace.RowSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {
onEditorKey : function(field, e){
var k = e.getKey();
g = this.grid,
ed = g.activeEditor;
if (k == e.TAB &&
ed.row == g.getStore().getCount() - 1 &&
ed.col == g.getColumnModel().getColumnCount() - 1) {
e.stopEvent();
ed.completeEdit();
// insert new row and start editing
} else {
return MyNamespace.RowSelectionModel.superclass.onEditorKey.call(this, field, e);
}
});
Disclaimer: Completely untested code!

leowyatt
23 Nov 2010, 6:03 AM
thanks for the code, I'm just going to read through it and make sure I understand it.

Am I right in thinking this should go in the js file where the editorgrid code is contained?

EDIT: actually come to think of it I'll need my grid to read


selModel : MyNamespace.RowSelectionModel,

in order for it to use the new code, yes?

Condor
23 Nov 2010, 6:19 AM
1. Put this in a separate file and include it after ext-all.js.
2. Use:

selModel : new MyNamespace.RowSelectionModel({...}),

leowyatt
23 Nov 2010, 6:32 AM
1. Put this in a separate file and include it after ext-all.js.
2. Use:

selModel : new MyNamespace.RowSelectionModel({...}),

I've done as you suggested, put it in its own file and have done:


selModel : new MyNamespace.RowSelectionModel,

and it works, I've just tweeked the code slightly so that it address a new row when you get the end of the current row.

Thanks for your help with this.

One question I have though is why have you used the rowselectionmodel?

Condor
23 Nov 2010, 6:41 AM
Personal choice. I like RowSelectionModel better than CellSelectionModel, even for an EditorGridPanel.