ExtJs NumberField验证

Question

我有一个像下面这样的复合元素

{
    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'     
        }
    ]
}

如何对xtype:'numberField'进行自定义验证？

我不想放置配置选项allowBlank:false，而是想在其他地方验证它，但在字段一侧显示错误消息。

任何人都可以向我解释如何做到这一点吗？

以下是我的操作方法，它在firebug中产生“无效方法”错误：

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

和

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

Answer 1

我认为最简单的方法是使用验证器功能：

{
    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";
                }
            }
        }
    ]
}

Answer 2

在Extjs4中，您可以将属性allowBlank设置为false以防止空数字字段条目。

还有minLength设置来限制必须输入的字符数。