I searched ExtJS related questions and didn't found any reference, but if I missed it sorry in advance to making duplicate question.
I would like to ask some assistance on how to make ExtJS 4 grid: cell editing: auto edit feature – what I mean is, I want to enter in cell editing mode when I press a key (for example, by pressing “123” in highlighted cell, text is replaced (if there is any) with “123”). At the moment entering cell editing mode can be done by pressing ENTER or clicking with mouse.
As base I am using Sencha provided example: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html
Any tips, pointers would be appreciative.
Thanks in advance! :)
Actually I did solve my problem partially. Found a way to make cell editable on key press, put selectOnFocus config param for text selecting in cell, now I need insert first char (that initiated editing mode) in cell.
It can be not the most beautiful solution, but it work for me :)
Here is full code up till now.
var tStore = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{name:Lisa, email:[email protected], phone:555-111-1224},
{name:Bart, email:[email protected], phone:555--222-1234},
{name:Homer, email:[email protected], phone:555-222-1244},
{name:Marge, email:[email protected], phone:555-222-1254}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var tGrid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: tStore,
columns: [
{header: 'Name', dataIndex: 'name', field: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype:'textfield',
allowBlank:false,
selectOnFocus: true
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins: [tCellEdit],
listeners: {
keypress: {
element: 'el',
fn: function(iEvent, iElement) {
iCode = iEvent.getKey();
if (iCode != undefined && iCode != iEvent.LEFT && iCode != iEvent.RIGHT && iCode != iEvent.UP && iCode != iEvent.DOWN && iCode != iEvent.ENTER && iCode != iEvent.ESC) {
var iView = tGrid.getView();
var position = iView.selModel.position;
tCellEdit.startEditByPosition(position);
}
}
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
