How to display error in validation for ExtJS grid?

Question

I'm using ExtJS to build a web application that allows for easy editing of a database.

I want to limit the number of characters for certain fields. So I added validation as you will see below. It seems to work, no data is persisted if it doesn't meet the requirements. But there is no message to tell the user what has gone wrong.

Ext.onReady(function() {
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit : 1
    });

    var toolbar = Ext.create('Ext.toolbar.Toolbar', {
      // [snip]
    });

    // Set up a model to use in our Store
    var mysource = Ext.define('Source', {
        extend : 'Ext.data.Model',
        fields : [ {
            name : 'id',
            type : 'int'
        }, {
            name : 'firstname',
            type : 'string'
        } ],
        validations: [{type: 'length', field: 'firstname', max: 10}]
    });


    var myStore = Ext.create('Ext.data.JsonStore', {
        model : 'Source',
        idProperty : 'id',
        proxy : {
            type : 'ajax',
            api : {
              // [snip]
            },
            reader : {
                type : 'json',
                root : 'data',
                successProperty: 'status'
            }
        },

        autoLoad : true
    });

    myStore.load();
    Ext.tip.QuickTipManager.init();

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        plugins : [ Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit : 1
        }) ],
        dockedItems : toolbar,
        store : myStore,
        stateful : true,
        stateId : 'stateGrid',
        columns : [ {
            text : 'ID',
            flex : 1,
            sortable : true,
            dataIndex : 'id'
        }, {
            text : 'Name',
            flex : 1,
            sortable : true,
            dataIndex : 'firstname',
            editor : {
                xtype : 'textfield'
            }
        } ],
        height : 350,
        width : 600,
        title : 'View / Edit Names',
        renderTo : 'nameGrid'
    });
});

I'm hoping all of this is sensible, I've cut out stuff that isn't relevant. I don't care how beautiful the error message is, but I need a message to display in the case that a validation fails (name too long in this case).

Answer 1

There is a property lengthMessage for validations. I think this is what you are looking for.

Personally, I didn't use validations on the model. I used VTypes on the form fields and editors, and there the messages always displayed.