how can i do a validation function that get me an error when IN1>OU1 or IN2>OU2 ??

this is my code (a grid panel with roweditor plugin)

{
 xtype: 'gridpanel',
 height: 250,
 width: 400,
 title: 'My Grid Panel',
 columns: [
           {
             xtype: 'datecolumn',
             text: 'IN1',
             dataindex 'F02ORAIN1',
             field: {
               xtype: 'timefield',
               id 'editF02ORAIN1'
             }
           },
           {
             xtype: 'datecolumn',
             dataindex 'F02ORAOU1',
             text: 'OU1',
             field: {
               xtype: 'timefield',
               id 'editF02ORAOU1'
             }
           },
           {
              xtype: 'datecolumn',
              text: 'IN2',
              dataindex 'F02ORAIN2',
              field: {
                xtype: 'timefield',
                id 'editF02ORAIN2'
              }
           },
           {
             xtype: 'datecolumn',
             text: 'OU2',
             dataindex 'F02ORAOU2',
             field: {
               xtype: 'timefield',
               id 'editF02ORAOU2'
            }
          }
 ],
 plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
    })
 ]
}

how can i do a validation function that get me an error when IN1>OU1 or IN2>OU2 ??

this is my code (a grid panel with roweditor plugin)

{
 xtype: 'gridpanel',
 height: 250,
 width: 400,
 title: 'My Grid Panel',
 columns: [
           {
             xtype: 'datecolumn',
             text: 'IN1',
             dataindex 'F02ORAIN1',
             field: {
               xtype: 'timefield',
               id 'editF02ORAIN1'
             }
           },
           {
             xtype: 'datecolumn',
             dataindex 'F02ORAOU1',
             text: 'OU1',
             field: {
               xtype: 'timefield',
               id 'editF02ORAOU1'
             }
           },
           {
              xtype: 'datecolumn',
              text: 'IN2',
              dataindex 'F02ORAIN2',
              field: {
                xtype: 'timefield',
                id 'editF02ORAIN2'
              }
           },
           {
             xtype: 'datecolumn',
             text: 'OU2',
             dataindex 'F02ORAOU2',
             field: {
               xtype: 'timefield',
               id 'editF02ORAOU2'
            }
          }
 ],
 plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
    })
 ]
}

• javascript
• extjs
• extjs4

2 Answers 2

I think the best way is to use field's validator config:

// ...
{
    xtype: 'datecolumn',
    text: 'IN1',
    dataIndex: 'F02ORAIN1',
    field: {
        xtype: 'timefield',
        id: 'editF02ORAIN1',
        validator: function(value) {
            if (!Ext.getCmp('editF02ORAOU1').getValue()) return true;
            if (this.getValue() > Ext.getCmp('editF02ORAOU1').getValue())
              return 'IN1 should be less then OU1';
            return true;
        }
    }
}, {
    xtype: 'datecolumn',
    dataIndex: 'F02ORAOU1',
    text: 'OU1',
    field: {
        xtype: 'timefield',
        id: 'editF02ORAOU1'
    }
},
// ...

Here is demo

Instead of using getCmp (which you should never do unless debugging), get the data to pare to value from the Store.