PDA

View Full Version : Make cell Editable on Focus in a Grid



kausikan
7 Apr 2017, 4:02 AM
Hi,
I am trying to Mimic Excel here , I have used CellEditing plugin and trying to change the cell to editable mode on focus.
Below is my code .I am using Extjs 4.2.0.

Ext.create (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-create)('Ext.data.Store (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.Store)',{
storeId:'simpsonsStore',
fields:['name','email','phone'],
data:{'items':[
{"name":"Lisa","email":"lisa@simpsons.com","phone":"555-111-1224"},
{"name":"Bart","email":"bart@simpsons.com","phone":"555-222-1234"},
{"name":"Homer","email":"home@simpsons.com","phone":"555-222-1244"},
{"name":"Marge","email":"marge@simpsons.com","phone":"555-222-1254"}
]},
proxy:{
type:'memory',
reader:{
type:'json',
root:'items'
}
}
});

Ext.create (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-create)('Ext.grid.Panel (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.Panel)',{
title:'Simpsons',
store:Ext.data.StoreManager.lookup (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.StoreManager-method-lookup)('simpsonsStore'),
columns:[
{header:'Name', dataIndex:'name', editor:'textfield'},
{header:'Email', dataIndex:'email', flex:1,
editor:{
xtype:'textfield',
allowBlank:false
}
},
{header:'Phone', dataIndex:'phone'}
],
selType:'cellmodel',
plugins:[
Ext.create (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-create)('Ext.grid.plugin.CellEditing (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.plugin.CellEditing)',{
triggerEvent: 'cellfocus'
})
],
height:200,
width:400,
renderTo:Ext.getBody (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-getBody)()
});

Refered the below link.
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.plugin.CellEditing

Thanks & Regards,
Kausikan P