PDA

View Full Version : Tabbing into grid's editable cell from other control on the UI



pradeep.sabharwal
23 Apr 2014, 8:30 AM
Hi,

We have a usability requirement here, user wants to use tab key to move from regular input controls on UI to editable cell on the grid on the same screen. We are using Ext.grid.plugin.CellEditing. And we looked into all the option but couldn't find any way to do it.
If anyone has a workaround for this, please let me know.

Thanks

scottmartin
23 Apr 2014, 9:10 AM
You could set onBlur of the field?



Ext.onReady(function(){

var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var editor = {
xtype: 'textfield',
allowBlank: false
};

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name', editor: editor },
{ header: 'Email', dataIndex: 'email', flex: 1, editor: editor },
{ header: 'Change', dataIndex: 'change', editor: editor }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),

plugins: [cellEditing]
});

Ext.create('Ext.Button', {
text: 'Edit Grid Cell',
renderTo: Ext.getBody(),
handler: function() {
cellEditing.startEditByPosition({row: 0, column: 0});
}
});

});