You need to use convert config for model fields. Inside convert config you can return your desired output.
A function which converts the value provided by the Reader into the value that will be stored in the record. This method can be overridden by a derived class or set as a convert config.
If configured as null, then no conversion will be applied to the raw data property when this Field is read. This will increase performance. but you must ensure that the data is of the correct type and does not need converting.
Example of convert functions:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['name', {
name: 'joindate',
convert: function(value, record) {
//if value is not defined then null return
return value ? Ext.Date.format(value, 'd/m/Y') : null;
}
}]
});
In this FIDDLE, I have created a demo using grid, cellediting and datefiled. I hope this will help/guid you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['name', {
name: 'joindate',
convert: function (value, r) {
//if value is not defined then null return
return value ? Ext.Date.format(value, 'd/m/Y') : null;
}
}]
});
Ext.create('Ext.data.Store', {
storeId: 'myStore',
model: 'MyModel',
data: [{
name: 'Lisa'
}, {
name: 'Bart'
}, {
name: 'Homer'
}, {
name: 'Marge'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'My Data',
store: 'myStore',
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: 'textfield'
}, {
header: 'Join Date',
dataIndex: 'joindate',
//You can also use Ext.util.Format.dateRenderer('d/m/Y') for showing required date formate inside grid cell.
// renderer: Ext.util.Format.dateRenderer('d/m/Y'),
flex: 1,
editor: {
completeOnEnter: false,
field: {
xtype: 'datefield',
editable: false,
//The date format string which will be submitted to the server. The format must be valid according to Ext.Date#parse.
submitFormat: 'd/m/Y',
//The default date format string which can be overriden for localization support. The format must be valid according to Ext.Date#parse.
format: 'd/m/Y',
allowBlank: false
}
}
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
renderTo: Ext.getBody(),
tools: [{
type: 'plus',
handler: function () {
var grid = this.up('grid'),
store = grid.getStore(),
rec = Ext.create('MyModel', {
name: ''
}),
context;
store.add(rec);
//Get Ext.grid.CellContext of first cell using getColumns()[0]
context = grid.getView().getPosition(rec, grid.getColumns()[0])
//Start editing in first cell
grid.setActionableMode(true, context);
}
}],
bbar: ['->', {
text: 'Save Data',
handler: function (btn) {
var store = this.up('grid').getStore();
store.each(rec => {
console.log(rec.data);
})
}
}]
});
}
});
