Avoid the grid cell to get dirty unless the values is changed - extjs

Question

How to avoid the grid cell from become a dirty cell unless the value is changed,
when I just touch the time cell , it becomes a dirty cell, how do I avoid that being getting dirty,
here's the Fiddle
Here is my grid ,
Ext.application({
name: 'Fiddle',
launch: function () {
var myStore = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['busname', 'time', 'typebus',],
data: [{
busname: 'ABCD',
time: '15:30:00',
typebus: 'AC Volvo',
}, {
busname: 'aaa',
time: '13:30:00',
typebus: 'Seater',
}, {
busname: 'AAAA',
time: '18:30:00',
typebus: 'Sleeper',
}, {
busname: 'ABCD',
time: '19:30:00',
typebus: 'AC Volvo',
},]
});
var typebusStore = Ext.create('Ext.data.Store', {
storeId: 'typeBusStore',
fields: ['id', 'name'],
data: [{
id: 1,
name: 'AC Volvo'
}, {
id: 2,
name: 'Seater'
}, {
id: 3,
name: 'Sleeper'
}]
})
Ext.create('Ext.grid.Panel', {
xtype: 'gridpanel',
itemId: 'busTimegrid',
pageSize: 1,
title: 'BUS DEATILS',
mapperId: 'getBusTime',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Bus Name',
dataIndex: 'busname',
editor: 'textfield'
}, {
text: 'Bus Time',
dataIndex: 'time',
xtype: 'gridcolumn',
renderer: function (value) {
if (value instanceof Date)
return Ext.util.Format.date(value, 'H:i:s');
else
return value;
},
flex: 1,
editor: {
xtype: 'timefield',
format: 'H:i:s',
allowBlank: true,
maskRe: /[0-9,:]/,
listeners: {
beforeselect: function (timefield, record) {
var grid = timefield.up('grid');
if (grid.store.find('time', record.data.disp) != -1) {
Ext.Msg.alert("Bus time already exist.");
return false;
}
}
}
}
}, {
header: 'Bus TYpe',
dataIndex: 'typebus',
editable: true,
renderer: function (value) {
if (value !== null && value.length == 1) {
var store = this.getEditor().getStore();
return store.findRecord('id', value).get('name');
}
return value;
},
editor: {
xtype: 'combo',
displayField: 'name',
valueField: 'id',
editable: true,
}
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
},
height: 200,
width: 400,
dockedItems: [{
xtype: 'toolbar',
docked: 'bottom',
items: [{
xtype: 'button',
flex: 1,
text: 'Download to Excel',
handler: function(b, e) {
b.up('grid').downloadExcelXml();
}
}]
}
],
renderTo: Ext.getBody()
});
}
});

Answer 1

Try this way - Fiddle
Ext.application({
name: 'Fiddle',
launch: function() {
run();
window.show();
}
});
function run() {
var myStore = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: [{
name: 'busname',
type: 'string'
}, {
name: 'time',
type: 'date'
}, {
name: 'typebus',
type: 'string'
}],
pageSize: 2,
proxy: {
type: 'memory',
enablePaging: true
},
data: [{
busname: 'ABCD',
time: '2016-03-03 15:30:00',
typebus: 'AC Volvo',
}, {
busname: 'aaa',
time: '2016-03-03 13:30:00',
typebus: 'Seater',
}, {
busname: 'AAAA',
time: '2016-03-03 18:30:00',
typebus: 'Sleeper',
}, {
busname: 'ABCD',
time: '2016-03-03 19:30:00',
typebus: 'AC Volvo',
}, ]
});
var typebusStore = Ext.create('Ext.data.Store', {
storeId: 'typeBusStore',
fields: ['id', 'name'],
data: [{
id: 1,
name: 'AC Volvo'
}, {
id: 2,
name: 'Seater'
}, {
id: 3,
name: 'Sleeper'
}]
})
Ext.create('Ext.grid.Panel', {
xtype: 'gridpanel',
itemId: 'busTimegrid',
pageSize: 1,
title: 'BUS DEATILS',
mapperId: 'getBusTime',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Bus Name',
dataIndex: 'busname',
editor: 'textfield'
}, {
xtype: 'datecolumn',
text: 'Bus Time',
dataIndex: 'time',
format: 'H:i:s',
flex: 1,
renderer: function(value) {
return Ext.util.Format.date(value, 'H:i:s');
},
editor: {
xtype: 'timefield',
format: 'H:i:s',
allowBlank: true,
maskRe: /[0-9,:]/
}
}, {
header: 'Bus TYpe',
dataIndex: 'typebus',
editable: true,
renderer: function(value, md, record) {
var retValue = Array();
if (Ext.isArray(value)) {
Ext.each(value, function(id) {
var ename = Ext.data.StoreManager.lookup('typeBusStore').findRecord('id', id).get('name');
retValue.push(ename);
console.log(retValue);
});
}
if (retValue.length > 0) {
return retValue.join(", ");
}
return value;
},
editor: {
xtype: 'combo',
displayField: 'name',
valueField: 'id',
editable: true,
forceSelection: true,
multiSelect: true,
displayTpl: '<tpl for=".">' +
'{name}' +
'<tpl if="xindex < xcount">, </tpl>' +
'</tpl>',
store: typebusStore
}
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
},
height: 200,
width: 400,
dockedItems: [{
xtype: 'pagingtoolbar',
store: myStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
}