Question

我试图在我的程序中使用自定义Vtype。这里有很多人试图帮助我。但我无法从这些中受益。这是我的代码。

Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: 'What are you doing?<br/>The passwords entered
do not match!'
});

我将此代码包含在Application的“启动”功能中，并将vtype更改为“password”。它工作。这是正确的方法吗？但是我得到了结果。如果我错了，可以使用其他方法，请通知我。这是我在Application中的启动功能。

Ext.Loader.setConfig({
enabled: true
});

Ext.application({
views: [
'signupForm'
],
autoCreateViewport: true,
name: 'MyApp',

launch: function() {
Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: 'What are you doing?<br/>The passwords entered do not match!'
});
}

});

谢谢

Answer 1

您可以覆盖Ext.form.field.VTypes。由于这是一个单例，它确实会直接修改Ext.form.field.VTypes对象，而不是它的原型（即Ext.form.field.VTypes.prototype）。

Ext.define('MyApp.Ext.form.field.VTypes', {
    override: 'Ext.form.field.VTypes'
    ,test: function() {
        // ...
    }
    ,testText: '...'
});

这样做的好处是类加载器将能够像标准类一样管理这个覆盖。也就是说，您可以在应用程序定义中或其他任何位置要求覆盖。例如：

Ext.application({
    requires: [
        'MyApp.Ext.form.field.VTypes'
    ]
    // ...
});

<强>更新

以下是您的代码所能提供的内容。

首先，创建文件app/VTypes.js：

// I've simplified the class name, compared to above    
Ext.define('MyApp.VTypes', {
    override: 'Ext.form.field.VTypes' // <= this is the line that makes it an override

    ,password: function(val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    }

    ,passwordText: 'What are you doing?<br/>The passwords entered do not match!'
});

然后，在您的应用程序定义中要求它（即app.js）：

Ext.application({
    name: 'MyApp'
    ,requires: [
        'MyApp.VTypes'
    ]
    // ...
});

Answer 2

您可以在以下代码中找到答案。

Ext.onReady(function() {    
    Ext.apply(Ext.form.VTypes, {
        password: function(val, field) {
            if (field.initialPassField) {
                var pwd = field.up('form').getForm().findField("initialPassField");
                return (val == pwd.getValue());
            }
            return true;
        },
        passwordText: 'What are you doing?<br/>The passwords entered do not match!'
    });

    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
        height : 400,

        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            fieldLabel: 'Password',
            name: 'last',
            initialPassField : true,
            vtype : 'password',
            inputType : 'password',
            allowBlank: false
        }, {
            name: 'initialPassField',
            hidden : true,
            value : 'Ajith'
        }],
        renderTo: Ext.getBody()
    });
});

编写自定义VType是验证表单字段的最佳方法。

自定义Vtype的替代解决方案？

2 个答案: