View Full Version : Validate datecolumn in grid against other grid rows' dates

12 Aug 2014, 12:14 PM
>> ExtJS 4.0.7 << (unable to deviate from this version)

I have a grid/store that contains 3 fields: mykey, effdate, expdate. The column mykey is not editable. effdate and expdate are editable. This means I can have multiple mykey values as long as the effdate/expdate values don't overlap with an existing row. Therefore, when the effective or expiration date is changed in any row, I need to compare those dates against the existing grid/store using mykey. I know how to code the IF logic. How do I get the datecolumns to execute a function when they are changed, and how do you use mykey to pull matching records out of the store to compare against? All of this logic will be used to mark the effective or expiration date field as an error.

13 Aug 2014, 5:41 AM
Try this Using the editors validate edit function to test.

var rowEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,

autoCancel: false,


validateedit: function(editor, context) {

var store = editor.grid.getStore();

var record = context.record;

if ( 1 == 1 ){

context.cancel = false;

} else {

context.cancel = true;



canceledit: function(editor, context) {



edit: function(editor, context, eOpts ) {



Ext.define('Test.view.ValGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.valGrid',
itemId: 'valGrid',
id: 'valGrid',
height: 400,
width: 750,
padding : '15 0 0 0', // top, right, bottom, left
border: 1,
plugins: [rowEditor],
store: 'Test.store.People',
columns: [
{ text: 'id', dataIndex: 'id', hidden:true },
{ text: 'name', dataIndex: 'name', editor: 'textfield' },
{ text: 'address1', dataIndex: 'address1', editor: 'textfield' },
{ text: 'address2', dataIndex: 'address2', editor: 'textfield' },
{ text: 'city', dataIndex: 'city', editor: 'textfield' },
{ text: 'state', dataIndex: 'state', editor: 'textfield' },
{ text: 'zip', dataIndex: 'zip', editor: 'textfield' },
{ text: 'phone', dataIndex: 'phone', editor: 'textfield' }
fbar : [ ],
initComponent: function() {

13 Aug 2014, 6:57 AM

Thanks for your response! :) This looks promising. However, after researching my dilemma, I now realize that I "must" make an ajax call to the server and do the date-overlap validation there, since the grid may not have all the data needed for comparison. That being said, is there an issue putting an ajax request inside the editor's validateedit function?

13 Aug 2014, 9:39 AM
The Ajax Call is going to be asynch so the event might be past before it can be validated, So I would look at that as risky not from a coding, but from a timing issue synch issue.

13 Aug 2014, 10:22 AM
Scott-1,Thanks for your response. What is your recommendation on how to accommodate for back-end validation of this type?

13 Aug 2014, 11:15 AM
Do batch processing on the server side. In other words let the user set up everything they need then click a save button pass or fail on the save action.


Do more client side processing for that it sound like you will need more data.

13 Aug 2014, 12:11 PM
Thanks again. I'll mark your original answer as the correct one. However, that solution won't work for certain scenarios. I think I am going to have to redesign the app so that the user has to specify a filter for specific records, then open up the eff/exp date columns in the grid for change. This way, the data store will have all the records I need to compare against. I have questions about that as well, but will open up another thread for that.