Question

I have a pretty standard Grid -> Store -> Model architecture in Extjs4. The requirement is that five of my eight fields in each record are mandatory, so I thought to use the Model valdiations config:

    Ext.define('TransferRecord', { extend: 'Ext.data.Model',
    fields: transferRecordFields,
    idProperty: 'RID',
    validations: [
    { type: 'presence', field: 'FNAME' },
    { type: 'presence', field: 'LNAME' },
    { type: 'presence', field: 'GENDER' },
    { type: 'presence', field: 'DOB' },
    { type: 'presence', field: 'TRANSFER_TYPE'}]
});

This sort of works – when the store syncs, it will not sync new records to the database unless all those fields are defined. However, there is no feedback to the user, other than the sync does not complete successfully.

Ideally, I would like to highlight the offending fields so the user knows which ones still need values (and conversely – clear the highlighting when they are ok). I know that if I call record.validate for each record, I can get an list of error objects, but I am not sure of how to translate that information to the cell at row X, Field ‘FNAME’ needs to change color (or the best way to find that cell so I can apply the change).

I feel like I’m missing something simple – that there is probably an API that already helps me here, but I can’t find it.

Answer 1

I have discovered that the example custom renderer in the EXTjs examples is not complete – that the renderer does take a lot of extra parameters that the example did not show.

I was able to get it working by defining the following renderer function and assigning it to each column:

    function mandatoryColumnRenderer(value, metaData, record, rowIndex, colIndex, store) {
        var errors = record.validate();
        if (errors.getByField(this.columns[colIndex].dataIndex).length > 0) {
            metaData.style = 'background-color: Gold;'
        }
        return value;
}