PDA

View Full Version : EditorGridPanel start editing on next line on ENTER.



naveedanjum
25 Feb 2010, 3:48 AM
How to get the EditorGridPanel on next Line on Enter Key Press?


var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width: 600,
height: 300,
autoExpandColumn: 'common', // column with this id will be expanded
title: 'Edit Plants?',
frame: true,
// specify the check column plugin on the grid so the plugin is initialized
plugins: checkColumn,
clicksToEdit: 1,
tbar: [{
text: 'Add Plant',
handler : function(){
// access the Record constructor through the grid's store
var Plant = grid.getStore().recordType;
var p = new Plant({
common: ''
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});

grid.on('afteredit', afterEdit, this );

grid.el.on('keydown',
function(e)
{
if(e.keyCode == 13)
{
var currentRow = e.row + 1;
grid.stopEditing();
grid.startEditing(currentRow, 0);
e.stopEvent();
}
}, this);


function afterEdit(e)
{
// execute an XHR to send/commit data to the server, in callback do (if successful):
var Plant = grid.getStore().recordType;
var p = new Plant({
common: ''
});

var nextRow = e.row + 1;

grid.stopEditing();
store.insert(e.row + 1, p);

grid.startEditing(nextRow, 0);

//this.fireEvent('keypress',this);
}

Currently it moves focus to next line but stop editing.

pwilliamson
17 Mar 2010, 8:25 PM
Try this code and see if this helps:

// Override Field object to add event handlers to
// the editable grid fields to enable Enter key navigation
Ext.override(Ext.form.Field, {
initComponent: Ext.form.Field.prototype.initComponent.createSequence(function() {
this.on('specialkey', function(field, e) {
if (e.getKey() == e.ENTER) {
var nextRow = grid.lastEdit.row + 1;
if (nextRow < grid.view.getRows().length) {
grid.stopEditing();
grid.startEditing(nextRow, contributions.lastEdit.col);
grid.selModel.select(nextRow, grid.lastEdit.col);
}
}
});
})
});