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.