Blog Archive

ExtJs 4 grid validation, how to display error qtip and update cell style

I needed a way to validate the Grid for errors when clicking on toolbar button say SAVE the Grid. If there was an error I would change the cell style to indicate to the user which cells have error and also add a qtip so that when the user hover over the cell they would know what kind of error occurred.

Looked all over the internet and spent quite a bit of time looking for a solution. So here is what I found and with some small tweaks it worked out great.

Manual grid cell Validation

 //get a reference to your grid based on where this code is getting called from
 //In the code below it assumes that grid is your grid reference
   
 store = grid.getStore();
 view = grid.getView();
 error = false;
 columnLength = grid.columns.length;
 
 store.each(function(record,idx){
  for (var i = 0; i < columnLength; i++) {
   cell = view.getCellByPosition({row: idx, column: i});
   cell.removeCls("x-form-invalid-field");
   cell.set({'data-errorqtip': ''});
   fieldName = grid.columns[i].dataIndex;
   if (fieldName === 'WHATEVER') {
    //Do your validation here
    if(failed) {
     cell.addCls("x-form-invalid-field");
     cell.set({'data-errorqtip': 'Your error message qtip'});
     error = true;
    }
     }
  }  
 });

Record validation using Model's built-in support

You can manually code for the validations as shown above or use the Model's built-in support for validations, which are executed against the validator functions in Ext.data.validations. Validations are easy to add to models:
Ext.define('ERRORS.model.Customer', {
    extend: 'Ext.data.Model',
    fields: [
             'customerId',
             'firstName',
             'lastName',
             'email',
             {name: 'active', type: 'bool'}
            ],
    validations: 
            [
                  {type: 'presence',  field: 'firstName'},
                  {type: 'presence',  field: 'lastName'},
                  {type: 'presence',  field: 'email'}
             ]
});

var errors = record.validate();
errors.isValid(); //true or false based on if there are errors

errors.length; //number of errors
errors.getByField('firstName'); // [{field: 'firstName', message: 'must be present'}]
errors.getByField('email'); // [{field: 'email', message: 'must be present'}]

Now you can get the errors by specific field names and display them in qtip as shown above in the grid and also change the cell style to indicate that there is an error.


8 comments :

  1. Useful code samples, it helped me a lot.

    ReplyDelete
  2. Hi Thanks for this!

    I am using ExtJS 4.2.1 and for whatever reason, the invalid cells are not being marked as invalid. The qtip works fine but I can not seem to effect the style of the cell in error using this code.

    Maybe something has changed in 4.2.1. Any ideas?

    Thanks!

    ReplyDelete
  3. Hi, I found that by adding the following CSS I was able to get this to work.

    .x-grid-row .error-column {
    background-color: #ffa;
    border-color: red;
    }

    ReplyDelete
  4. Mean to say also that instead adding / removing this class:
    x-form-invalid-field

    I am adding /removing this class:

    error-column

    See my last post for the css.

    ReplyDelete
  5. hi please post the entire code
    i should do validation for editable grid. I use Ext.grid.plugin.CellEditing for edit grid.
    ______________________________________
    |_not_valid_____@|______________|_____|
    |________________|__not_valid__@|_____|
    |_not_valid_____@|______________|_____|

    how can I innsert error message in any cell?

    ReplyDelete
  6. See version for Ext JS 6.2.0 -> https://www.sencha.com/forum/showthread.php?325089-Implement-Grid-Cell-Validation-Error-reporting-via-rendering-and-qtip&p=1155929&viewfull=1#post1155929

    ReplyDelete