ExtJs: How to validate editible Grid and prevent empty cells

Question

I need to validate a grid using this link. But I can't use getByCellPosition function and it returns false because of its input parameters {row: idx, column: i} .

How can I get cell from the grid and call this function?

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;
       }
        }
     }  
    });

Answer 1

I think using 'renderer' is easy and efficient way. If its suitable with your code, you can try this: https://fiddle.sencha.com/#fiddle/tl3

var validRenderer = function (val, meta, rec, rowIndex, colIndex, store) {
            if (val == isNotValid) {
                meta.tdAttr = 'data-qtip=" '+val+' is not right person"';
                meta.style = "background-color:red;"; 
            }
            return val;
        }



        var grid = Ext.create('Ext.grid.Panel', {
            store: store1,
            columns: [
                {
                    text: 'Name',
                    dataIndex: 'name',
                    renderer: validRenderer
                }
            ],
            renderTo: Ext.getBody()
        });