extjs vtype在textarea上不起作用

Question

ok , I have a vtype for enslish and sign only that looks like this:

Ext.apply(Ext.form.VTypes, {
excel: function (v) {
    return /^.*.(xls)$/.test(v);
},
excelText: 'Must be an *.xls file',
englishOnly: function (v) {
    return /^[a-z0-9,\.\~\!\@\#\$\%\^\&\*\(\)\_\+\<\>]*$/.test(v);
},
englishOnlyTest: 'Must be English letters'

});

now I have a form that looks like this:

new Ext.FormPanel({
    id: 'add-label-form',
    url: hp,
    frame: true,
    baseParams: { actionName: 'AddLable' },
    defaultType: 'textfield',
    labelWidth: 70,
    items: [{
        id: 'tbKey',
        fieldLabel: localize.key,
        allowBlank: false,
        name: 'tbKey',
        anchor: '100%'
    }, {
        id: 'tbHebrewTran',
        fieldLabel: localize.hebrew,
        allowBlank: false,
        name: 'tbHebrewTran',
        anchor: '100%'
    }, {
        id: 'tbEnglishTran',
        fieldLabel: localize.english,
        allowBlank: false,
        name: 'tbEnglishTran',
        anchor: '100%'
    }, {
        id: 'tbDescription',
        xtype: 'textarea',
        vtype:'englishOnly',
        fieldLabel: localize.description,
        allowBlank: true,
        name: 'tbDescription',
        anchor: '100%'
    }],
    buttons: [{
        text: localize.submit,
        formBind: true,
        handler: onAddLabelSubmitClick
    }, {
        text: localize.reset,
        handler: function () {
            var f = Ext.getCmp('add-label-form').getForm();
            f.reset();
        }
    }]
})

The vtype handler is called and returns false as expected but the form is still valid and no alert is displayed on the screen... why is that?

Answer 1

Make sure to include monitorValid: true in your FormPanel config.

Here's a comment from the API that explains the config option in more detail:

monitorValid : Boolean

If true, the form monitors its valid state client-side and regularly fires the clientvalidation event passing that state.

When monitoring valid state, the FormPanel enables/disables any of its configured buttons which have been configured with formBind: true depending on whether the form is valid or not. Defaults to false.

With this set you should see the Button enabled/disabled and a red outline around whatever field the vtype applied to.

Update:

I noticed that your text variable for englishOnly is defined as englishOnlyTest , and I think it should be defined as englishOnlyText (you spelled "test" instead of "text"). If I recall correctly the framework expects to see text appended to the string that you want to use for the returned text. This may be why you're not seeing any red outline or popup text.