Question

I have a composite element like below

{
    xtype: 'compositefield'
    ,hideLabel: true
    ,labelWidth: 100
    ,items: [
        {
            xtype: 'displayfield'
            ,width: 160
            ,value: 'field 1'
        },
        {
            xtype: 'checkbox',
            name: 'field1name',
            id: 'field1id',
            checked: true
        },
        {
            xtype: 'displayfield'
            ,width: 20
            ,value: 'Ft '
        },
        {
            xtype: 'numberfield',
            width: 50,
            allowNegative: false,
            value: 50,
            name: 'numberfield'     
        }
    ]
}

How can I have a custom validation for the xtype:'numberField'?

I do not want to put the config option allowBlank:false, but instead, I want to validate it somewhere else, but display an error message on the side of the field.

Can anyone please explain to me how to do it?

Below is how I am doing it, which produces “invalid method” error in firebug:

Ext.get('numberfield').setActiveError('this Field Cannot be Blank');

and

Ext.get('numberfield').markInvalid('this Field Cannot be Blank');

Answer 1

I think easiest is to use a validator function:

{
    xtype: 'compositefield'
    ,hideLabel: true
    ,labelWidth: 100
    ,monitorValid: true
    ,items: [
        [...]
        {
            xtype: 'numberfield',
            width: 50,
            allowNegative: false,
            value: 50,
            name: 'numberfield',
            validator: function(val) {
                if (!Ext.isEmpty(val)) {
                    return true;
                }
                else {
                    return "Value cannot be empty";
                }
            }
        }
    ]
}