EXT JS how come the cellmodel are not editable? - extjs

Question

Ext.define('RouteFareModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Rate_ID', type: 'number'},
{name: 'Route_Fare' , type: 'int'},
'From_LocationName',
'To_LocationName',
'From_LocationID',
'To_LocationID',
'from_name',
'to_name',
'Route_ID',
'Normal_Rate',
'Discounted_Rate']
});
var RouteFareStore = Ext.create('Ext.data.JsonStore', {
model: 'RouteFareModel',
storeId: 'RouteFareStore',
autoLoad: false,
sorters: [{
property: 'Route_Fare',
direction: 'ASC'
}],
proxy: {
type: 'ajax',
url: 'get-routefare.php',
api: {
create: 'insert-routeseq.php',
//read: 'http://visual04/ModuleGestion/php/Pays.php?action=read',
update: 'update-routeseq.php',
//destroy: 'http://visual04/ModuleGestion/php/Pays.php?action=destroy'
},
actionMethods: 'POST',
baseParams: {
_id : 0,
},
reader: {
type: 'json',
idProperty: '_id'
},
writer: {
type: 'json',
id: '_id'
}
}
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
Ext.define('MyApp.view.MyGridPanelRouteFare', {
extend: 'Ext.grid.Panel',
id:'MyGridPanelRouteFare',
alias: 'widget.mygridpanelroutefare',
renderTo: Ext.getBody(),
height: window.innerHeight,
width: window.innerWidth/3,
title: 'Route Fare Setting',
selModel: {
selType: 'cellmodel'
},
plugins: [cellEditing],
store: RouteFareStore,
columns: [
{
xtype:'gridcolumn',
width: 120,
dataIndex: 'from_name',
text: 'From Location'
},
{
xtype:'gridcolumn',
width: 120,
dataIndex: 'to_name',
text: 'To Location'
},
{
xtype:'gridcolumn',
width: 80,
dataIndex: 'Normal_Rate',
text: 'Normal Rate'
},
{
xtype:'gridcolumn',
width: 80,
dataIndex: 'Discounted_Rate',
text: 'Discount Rate'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
height: 30,
items: [
{
xtype: 'combobox',
id:'cmbFareRouteID',
width: 191,
store: RouteNameStore,
valueField : "_id",
displayField : "Route_Code",
fieldLabel: 'Route Code',
labelWidth: 70,
editable: false,
queryMode: 'local',
listeners: {
select: function( combo, records, eOpts ) {
console.log("Combo selected _id : "+records[0].get('_id'));
RouteFareStore.load({
params:{
_id: records[0].get('_id')
}
});
}
}
},
{
xtype: 'button',
cls: '',
id: 'BtnFareCmbRefresh',
width: 65,
icon: '',
iconCls: 'refresh',
text: 'Refresh'
}
]
},
{
xtype: 'toolbar',
dock: 'top',
height: 30,
items: [
{
xtype: 'button',
cls: '',
id: 'BtnRouteFareSave',
width: 65,
icon: '',
iconCls: 'save',
text: 'Save'
},
{
xtype: 'button',
cls: '',
id: 'BtnRouteFareRefresh',
width: 65,
icon: '',
iconCls: 'refresh',
text: 'Refresh'
}
]
}
]
})
i have add
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
but the grid cell still not able to editable. why?

Answer 1

{
xtype:'gridcolumn',
width: 80,
dataIndex: 'Normal_Rate',
text: 'Normal Rate',
field: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 1000
}
},
must insert field: {} , then the cellmodel able to editable already.