extjs - extjs 4 - 如何更改字段中的默认消息错误

Question

我在http://jsfiddle.net/7CLWy/有一个表单面板， 这是我的重要代码

items: [{
    xtype: 'textfield',
    fieldLabel: 'First Name',
    allowBlank: false,
    msgTarget: 'under',
    name: 'firstName'
}, {
    xtype: 'datefield',
    allowBlank: false,
    fieldLabel: 'Start date',
    msgTarget: 'under'
}],

我想更改字段中的默认消息错误

如何改变它。谢谢

Answer 1

该blankText属性是需要字段时的验证消息，并且invalidText是字段通常验证失败时的文本。您可以在这些属性中添加自己的自定义消息。同样，如果您碰巧使用该regex属性进行基于正则表达式的验证，则可以使用该regexText字段来提供自定义验证消息。

    items: [{
        xtype: 'textfield',
        fieldLabel: 'First Name',
        allowBlank: false,
        msgTarget: 'under',
        name: 'firstName',
        blankText: 'This should not be blank!'
    }, {
        xtype: 'datefield',
        allowBlank: false,
        fieldLabel: 'Start date',
        msgTarget: 'under',
        invalidText: 'This value is not a valid date!'
    }, {
        xtype: 'textfield',
        fieldLabel: 'Digits followed by A,B,or C',
        msgTarget: 'under',
        name: 'someText',
        regex: /^\d+[ABC]$/,
        regexText: 'This must be a string of digits followed by A, B, or C!'
    }]

Answer 2

msgTarget: 'side' 将在字段右侧添加一个错误图标，仅在悬停时在弹出窗口中显示消息。

如果您仔细阅读文档，msgTarget 还有一个选项http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget

[元素id] 将错误信息直接添加到指定元素的innerHTML中。您必须使用 id 在控件的右侧动态添加一个“td”。那么如果你指定 msgTarget: 'element id' 它将起作用。

参考 -> ExtJS4：如何在文本框、组合框等旁边显示验证错误消息

Answer 3

我们可以使用验证器方法并返回自定义消息。

{
    xtype: 'textfield',
    fieldLabel: 'Digits followed by A,B,or C',
    msgTarget: 'under',
    name: 'someText',
    validator : function(value){
         var regex= /^\d+[ABC]$/;
         if(!regex.test(value)){
              return "'This must be a string of digits followed by A, B, or C!'"
          }
         return true;
    }

}

Answer 4

要更改默认的活动错误消息，我们使用 setActiveError( msg )。您会看到以下代码。

items: [{
        xtype: 'textfield',
        fieldLabel: 'First Name',
        allowBlank: false,
        id:'fn',
        msgTarget: 'under',
        name: 'firstName',

    }, {
        xtype: 'datefield',
        allowBlank: false,
        fieldLabel: 'Start date',
        msgTarget: 'under',
       }
    ],
renderTo: Ext.getBody()
});
var m = Ext.getCmp('fn');
m.setActiveError("important"); //can change the text