ExtJs - Change Textfield VType dynamically

问题

A rather straightforward question. No answer found anywhere.

Using ExtJs 4.2

I have two custom VTypes, and one textfield. I want to change that textfield's vtype when the user clicks a radio button.

I know that the text field has already been created so doing:

textfield.vtype = 'otherType';

won't do it for me. Neither will:

Ext.apply(textField,{vtype:'otherType'});

So the obvious stuff is out. Now I'm toying with destroying and re-creating it, but (if it even works) that seems like overkill.

回答1:

Using Ext.apply worked for me, fiddle here: https://fiddle.sencha.com/#fiddle/4d4

Hope this helps..

回答2:

The other answers are not taking into account that the maskRe needs to change as well. Why? If you just apply a new vtype the validation will be according to the new vtype, but the characters you're allowed to type does not change along with the new vtype.

This is the full solution.

textfield.vtype = 'otherType';
textfield.validate();
textfield.maskRe = Ext.form.field.VTypes[textfield.vtype + 'Mask'];

If you want to know why, look at the source at how maskRe is set initially: http://docs.sencha.com/extjs/4.2.1/source/Text2.html#Ext-form-field-Text-method-initEvents

Here's an override that allows you to call setVType on any textfield.

Ext.define('Ext.overrides.form.field.Text', {
    override: 'Ext.form.field.Text',

    /**
     * Changes the vtype, adjusts the maskRe
     * and revalidates unless withValidate is false.
     */
    setVType: function(newVtype, withValidate) {
        var me = this;

        me.vtype = newVtype;
        if (withValidate !== false) {
            me.validate();
        }
        me.maskRe = Ext.form.field.VTypes[me.vtype + 'Mask'];    
    }
});

回答3:

Using Ext.apply and validate() worked for me, fiddle here: https://fiddle.sencha.com/#fiddle/10mp

Use for validation without clear field:

Ext.apply(textField,{vtype:'otherType'});
textField.validate();

来源：https://stackoverflow.com/questions/22519233/extjs-change-textfield-vtype-dynamically

标签

javascript

extjs

extjs4