当前位置： 文江博客话题详情

ExtJS 将多个 vType 应用于一个字段

发布于 2024-10-20 03:13:01 字数 15979 浏览 1 评论 0原文

我见过在字段中使用内置 vType 和自定义 vType 的示例，但从未见过将自定义 vType 与内置 vType 一起使用。例如，这是我目前在我的代码中使用的一个，我从 Sencha 示例和论坛中找到了它（非常感谢）：

//Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return false;
        }
        if (field.startDateField) {
            var start = Ext.getCmp(field.startDateField);
            if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
                start.setMaxValue(date);
                start.validate();
            }
        }
        else if (field.endDateField) {
            var end = Ext.getCmp(field.endDateField);
            if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
                end.setMinValue(date);
                end.validate();
            }
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
            return true;
        }

});

虽然这会阻止用户选择按时间顺序不正确的开始和结束日期，但我可以很好地添加，它会覆盖检查用户是否以正确格式输入日期的默认值。有没有办法让高级 vType 和默认 vType 同时工作？现在，用户只需在这些字段中输入字母或不正确的日期格式即可提交答案，而不会进行错误检查！如果已经存在让我拥有多个 vType 的东西，我不想重写已经编写的内容并重新发明轮子。

感谢您的宝贵时间，

elshae

编辑 我根据请求添加更多表单代码。太长了，所以我删掉了一些。我希望这足够了......

this.captchaURL = "captcha/CaptchaSecurityImages.php?width=160&height=80&characters=4&t=";

var boxCaptcha =    new Ext.BoxComponent({
    columnWidth:.35,    
    autoEl: {
                tag:'img'
                ,id: 'activateCodeImg'
                ,src:this.captchaURL+new Date().getTime()
            }
});

boxCaptcha.on('render',function (){
var curr = Ext.get('activateCodeImg');
curr.on('click',this.onCapthaChange,this);
},this);

function onCapthaChange(){
    var captchaURL = this.captchaURL;
    var curr = Ext.get('activateCodeImg');
    curr.slideOut('b', {callback: function(){
                Ext.get( 'activateCodeImg' ).dom.src= captchaURL+new Date().getTime();
                curr.slideIn('t');      
    }},this);
}

function getLang(){
     // decode language passed in url
   var locale = window.location.search 
                ? Ext.urlDecode(window.location.search.substring(1))
                : '';
   return locale['lang'];
}//end getLang()

var form;

var lang = getLang();
var languageFile;
var localeFile;


if (lang == 'chn'){
    languageFile = 'chinese.json'; 
    localeFile = '../ext-3.3.1/src/locale/ext-lang-zh_CN.js';
}
else if (lang == 'eng'){
    languageFile = 'english.json';
}
else if (lang == 'tib'){
    languageFile = 'tibetan.json'; 
    localeFile = '../ext-3.3.1/src/locale/ext-lang-zh_CN.js';
}


$.getScript(localeFile, function(){ 

var i18n = {};

    $.getJSON(languageFile, i18n, function(data) { i18n = data.i18n; 


Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif';

//Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return false;
        }
        if (field.startDateField) {
            var start = Ext.getCmp(field.startDateField);
            if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
                start.setMaxValue(date);
                start.validate();
            }
        }
        else if (field.endDateField) {
            var end = Ext.getCmp(field.endDateField);
            if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
                end.setMinValue(date);
                end.validate();
            }
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    }
});

Ext.onReady(function(){
    Ext.QuickTips.init();

        form = new Ext.form.FormPanel({
        id: 'scholarshipForm',
        //labelWidth: 200, // label settings here cascade unless overridden
        url:'scholarshipSubmit.php',
        method: 'POST',
        frame:true,
        layout: 'form',
        title: i18n.Apply,
        bodyStyle:'padding:10px 10px 0',
        width: 610,
        itemCls: 'formStyle',
        items: [{
            xtype:'fieldset',
            checkboxToggle:false,
            labelWidth: 200,
            title: i18n.Student_Information,
            autoHeight:true,
            layout: 'form',
            defaults: {width: 210},
            collapsed: false,
            items :[{
                    xtype: 'textfield',
                    fieldLabel: i18n.First_Name,
                    allowBlank:false,
                    name: 'first', 
                    maskRe: /([a-zA-Z\s]+)$/,
                    msgTarget: 'side'
                },{
                    xtype: 'textfield',
                    fieldLabel: i18n.Last_Name,
                    allowBlank:false,
                    msgTarget: 'side',
                    name: 'last',
                    maskRe: /([a-zA-Z\s]+)$/
                },{
                    xtype: 'radiogroup',
                    fieldLabel: i18n.Gender,
                    name: 'gender',
                    columns: 1,
                    rows: 2,
                    allowBlank:false,
                    msgTarget: 'side',
                    items: [
                            {boxLabel: i18n.Male, name: 'sex', inputValue: i18n.Male},
                            {boxLabel: i18n.Female, name: 'sex', inputValue: i18n.Female}
                            ]
                },{
                    xtype: 'datefield',
                    fieldLabel: i18n.Date_of_Birth,
                    name: 'birthdate',
                    id: 'birthdate',
                    allowBlank:false,
                    msgTarget: 'side',
                    minValue: '02/24/1950',
                    maxValue: '02/24/1990',
                    //width: 210
                },{
                    xtype: 'textfield',
                    fieldLabel: i18n.Place_of_Birth,
                    allowBlank:false,
                    name: 'pob',
                    msgTarget: 'side'
                },/*{
                    xtype: 'compositefield',
                    fieldLabel: 'Phone',
                    // anchor    : '-20',
                    // anchor    : null,
                    msgTarget: 'under',
                    items: [
                        {xtype: 'displayfield', value: '('},
                        {xtype: 'textfield',    name: 'phone1', width: 29, allowBlank: false},
                        {xtype: 'displayfield', value: ')'},
                        {xtype: 'textfield',    name: 'phone2', width: 29, allowBlank: false, margins: '0 5 0 0'},
                        {xtype: 'textfield',    name: 'phone3', width: 48, allowBlank: false}
                    ]
                }*/{
                    xtype: 'textfield',
                    fieldLabel: i18n.Phone,
                    msgTarget: 'under',
                    name: 'phone',
                    allowBlank: false,
                    maskRe: /[0-9]/,
                    msgTarget: 'side'
                },{
                    xtype: 'textfield',
                    fieldLabel: i18n.Email,
                    name: 'email',
                    vtype:'email',
                    msgTarget: 'under',
                    allowBlank: false
                },{
                    xtype: 'fieldset',
                    fieldLabel: i18n.Instant_Messaging + '1 '.sup(),
                    name: 'IM',
                    labelWidth: 50,
                    defaults: {width: 120},
                items:[{
                    xtype: 'textfield',
                    fieldLabel: 'MSN',
                    name: 'msn'
                },{
                    xtype: 'textfield',
                    fieldLabel: 'Skype',
                    name: 'skype'
                }]}  
            ]
        },{
            xtype:'fieldset',
            title: i18n.Previous_Schooling + '2 '.sup(),
            collapsible: false,
            autoHeight:true,
            labelWidth: 150,
           // defaultType: 'textfield',
            items :[{xtype: 'tabpanel',
                activeTab: 0,
                width: 550,
                defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
                title:'Previous Schooling',
                items :[{
                    title: i18n.School + ' 1',
                    layout:'form',
                    defaults: {width: 250},
                    items: [{
                    xtype: 'textfield',
                    fieldLabel: i18n.School_Name,
                    allowBlank:false,
                    //width: 250,
                    name: 'nos1',
                    msgTarget: 'side',
                    maskRe: /([a-zA-Z0-9\s]+)$/
                },{
                    xtype:'fieldset',
                    title: i18n.Language_Medium + '3 '.sup(),
                    collapsible: false,
                    width: 400,
                    autoHeight:true,
                    labelWidth: 50,
                    items :[{
                    xtype: 'radiogroup',
                    fieldLabel: i18n.Tibetan,
                    name: 'Tibetan1',
                    labelWidth: 100,
                    columns: [110, 60, 70, 50],
                    rows: 1,
                    itemCls: 'x-check-group-alt',
                    width: 300,
                    //defaults: {width: 200},
                    allowBlank:false,
                    msgTarget: 'side',
                    //vertical: true,
                   // cls: 'languages',
                    items: [
                            {boxLabel: i18n.Mother_Tongue, name: 'tibetan1', inputValue: i18n.Mother_Tongue},
                            {boxLabel: i18n.Fluent, name: 'tibetan1', inputValue: i18n.Fluent},
                            {boxLabel: i18n.Scholar, name: 'tibetan1', inputValue: i18n.Scholar},
                            {boxLabel: i18n.None, name: 'tibetan1', inputValue: i18n.None}
                            ]
                },{
                    xtype: 'radiogroup',
                    fieldLabel: i18n.Chinese,
                    name: 'Chinese1',
                    columns: [110, 60, 70, 50],
                    rows: 1,
                    width: 300,
                    itemCls: 'x-check-group-alt',
                    allowBlank:false,
                    msgTarget: 'side',
                    items: [
                            {boxLabel: i18n.Mother_Tongue, name: 'chinese1', inputValue: i18n.Mother_Tongue},
                            {boxLabel: i18n.Fluent, name: 'chinese1', inputValue: i18n.Fluent},
                            {boxLabel: i18n.Scholar, name: 'chinese1', inputValue: i18n.Scholar},
                            {boxLabel: i18n.None, name: 'chinese1', inputValue: i18n.None}
                            ]
                },{
                    xtype: 'radiogroup',
                    fieldLabel: i18n.English,
                    name: 'English1',
                    width: 300,
                    columns: [110, 60, 70, 50],
                    rows: 1,
                    itemCls: 'x-check-group-alt',
                    allowBlank:false,
                    msgTarget: 'side',
                    items: [
                            {boxLabel: i18n.Mother_Tongue, name: 'english1', inputValue: i18n.Mother_Tongue},
                            {boxLabel: i18n.Fluent, name: 'english1', inputValue: i18n.Fluent},
                            {boxLabel: i18n.Scholar, name: 'english1', inputValue: i18n.Scholar},
                            {boxLabel: i18n.None, name: 'english1', inputValue: i18n.None}
                            ]
                },{

                    xtype: 'textfield',
                    fieldLabel: i18n.Other,
                    width: 250,
                    emptyText: i18n.Type_Lang,
                    itemCls: 'x-check-group-alt',
                    name: 'other1text',
                    id: 'other1text',
                    maskRe: /([a-zA-Z\s]+)$/
                },{
                    xtype: 'radiogroup',
                    name: 'Other1',
                    columns: [110, 60, 70, 50],
                    rows: 1,
                    width: 300,
                    itemCls: 'x-check-group-alt',
                    msgTarget: 'side',
                    items: [
                            {boxLabel: i18n.Mother_Tongue, name: 'other1', inputValue: i18n.Mother_Tongue},
                            {boxLabel: i18n.Fluent, name: 'other1', inputValue: i18n.Fluent},
                            {boxLabel: i18n.Scholar, name: 'other1', inputValue: i18n.Scholar},
                            {boxLabel: i18n.None, name: 'other1', inputValue: i18n.None}
                            ]
                }]},{
                    xtype: 'datefield',
                    fieldLabel: i18n.Enrollment_Start,
                    allowBlank:false,
                    msgTarget: 'side',
                    name: 'enrollStart1',
                    id: 'enrollStart1',
                    vtype: 'daterange',
                    //width: 250,
                    endDateField: 'enrollEnd1'
                 // minValue: '02/24/1950'
                },{
                    xtype: 'datefield',
                    fieldLabel: i18n.Enrollment_End,
                    allowBlank:false,
                    msgTarget: 'side',
                    name: 'enrollEnd1',
                    id: 'enrollEnd1',
                    vtype: 'daterange',
                   // width: 250,
                    startDateField: 'enrollStart1'
                },{
                    xtype: 'textfield',
                    fieldLabel: i18n.Degree,
                    allowBlank:false,
                    name: 'degree1',
                    msgTarget: 'side',
                    //width: 250,
                    maskRe: /([a-zA-Z0-9\s]+)$/
                }]},{
                title: i18n.School + ' 2',
                layout:'form',
                defaults: {width: 250},
                items: [{
                    xtype: 'textfield',
                    fieldLabel: i18n.School_Name,
                   // allowBlank:false,
                    name: 'nos2',
                    msgTarget: 'side',
                    maskRe: /([a-zA-Z0-9\s]+)$/
                },{

...
...
...

 buttons: [{
            text: i18n.Submit,
            handler: function(){

                    form.getForm().submit({
                        params:{lang: lang},
                        success: function(form, action) {
                               Ext.Msg.alert(i18n.Success, action.result.msg);
                        },
                        failure: function(form, action) {
                            switch (action.failureType) {
                                case Ext.form.Action.CLIENT_INVALID:
                                    Ext.Msg.alert(i18n.Failure, i18n.Client_Error);
                                    break;
                                case Ext.form.Action.CONNECT_FAILURE:
                                    Ext.Msg.alert(i18n.Failure, i18n.Ajax_Error);
                                    break;
                                case Ext.form.Action.SERVER_INVALID:
                                    Ext.Msg.alert(i18n.Failure, action.result.msg);
                                }//end switch
                        }

                    });
            }
        },{
            text: i18n.Reset,
            handler: function(){
                form.getForm().reset();
            }
        }]
    });

        form.render(document.body);

    }); //End Ext.onReady
});//End $.getJSON
});//End $.getScript
原文

I have seen examples that use built-in vTypes and custom ones for a field, but never a custom and built-in vType together. For example, here is one I am currently using in my code which I have found from the Sencha examples and forums (many thanks):

//Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return false;
        }
        if (field.startDateField) {
            var start = Ext.getCmp(field.startDateField);
            if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
                start.setMaxValue(date);
                start.validate();
            }
        }
        else if (field.endDateField) {
            var end = Ext.getCmp(field.endDateField);
            if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
                end.setMinValue(date);
                end.validate();
            }
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
            return true;
        }

});

Although this prevents the users from picking start and end dates that are not chronologically correct and quite nicely I might add, it overrides the default which checks that the user entered a date in correct format. Any way to have both the advanced vType and the default working at the same time? Now users can simply put letters in these fields or incorrect date formats and there answers will be submitted with no error checking! If something already exists for me to have multiple vTypes, I don't want to have to rewrite what is already written and reinvent the wheel.

Thanks for your time,

elshae

EDIT
I am adding more of the form code by request. It's very long, so I have cut some of it out. I hope this will be enough...

this.captchaURL = "captcha/CaptchaSecurityImages.php?width=160&height=80&characters=4&t=";

var boxCaptcha =    new Ext.BoxComponent({
    columnWidth:.35,    
    autoEl: {
                tag:'img'
                ,id: 'activateCodeImg'
                ,src:this.captchaURL+new Date().getTime()
            }
});

boxCaptcha.on('render',function (){
var curr = Ext.get('activateCodeImg');
curr.on('click',this.onCapthaChange,this);
},this);

function onCapthaChange(){
    var captchaURL = this.captchaURL;
    var curr = Ext.get('activateCodeImg');
    curr.slideOut('b', {callback: function(){
                Ext.get( 'activateCodeImg' ).dom.src= captchaURL+new Date().getTime();
                curr.slideIn('t');      
    }},this);
}

function getLang(){
     // decode language passed in url
   var locale = window.location.search 
                ? Ext.urlDecode(window.location.search.substring(1))
                : '';
   return locale['lang'];
}//end getLang()

var form;

var lang = getLang();
var languageFile;
var localeFile;


if (lang == 'chn'){
    languageFile = 'chinese.json'; 
    localeFile = '../ext-3.3.1/src/locale/ext-lang-zh_CN.js';
}
else if (lang == 'eng'){
    languageFile = 'english.json';
}
else if (lang == 'tib'){
    languageFile = 'tibetan.json'; 
    localeFile = '../ext-3.3.1/src/locale/ext-lang-zh_CN.js';
}


$.getScript(localeFile, function(){ 

var i18n = {};

    $.getJSON(languageFile, i18n, function(data) { i18n = data.i18n; 


Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif';

//Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return false;
        }
        if (field.startDateField) {
            var start = Ext.getCmp(field.startDateField);
            if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
                start.setMaxValue(date);
                start.validate();
            }
        }
        else if (field.endDateField) {
            var end = Ext.getCmp(field.endDateField);
            if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
                end.setMinValue(date);
                end.validate();
            }
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    }
});

Ext.onReady(function(){
    Ext.QuickTips.init();

        form = new Ext.form.FormPanel({
        id: 'scholarshipForm',
        //labelWidth: 200, // label settings here cascade unless overridden
        url:'scholarshipSubmit.php',
        method: 'POST',
        frame:true,
        layout: 'form',
        title: i18n.Apply,
        bodyStyle:'padding:10px 10px 0',
        width: 610,
        itemCls: 'formStyle',
        items: [{
            xtype:'fieldset',
            checkboxToggle:false,
            labelWidth: 200,
            title: i18n.Student_Information,
            autoHeight:true,
            layout: 'form',
            defaults: {width: 210},
            collapsed: false,
            items :[{
                    xtype: 'textfield',
                    fieldLabel: i18n.First_Name,
                    allowBlank:false,
                    name: 'first', 
                    maskRe: /([a-zA-Z\s]+)$/,
                    msgTarget: 'side'
                },{
                    xtype: 'textfield',
                    fieldLabel: i18n.Last_Name,
                    allowBlank:false,
                    msgTarget: 'side',
                    name: 'last',
                    maskRe: /([a-zA-Z\s]+)$/
                },{
                    xtype: 'radiogroup',
                    fieldLabel: i18n.Gender,
                    name: 'gender',
                    columns: 1,
                    rows: 2,
                    allowBlank:false,
                    msgTarget: 'side',
                    items: [
                            {boxLabel: i18n.Male, name: 'sex', inputValue: i18n.Male},
                            {boxLabel: i18n.Female, name: 'sex', inputValue: i18n.Female}
                            ]
                },{
                    xtype: 'datefield',
                    fieldLabel: i18n.Date_of_Birth,
                    name: 'birthdate',
                    id: 'birthdate',
                    allowBlank:false,
                    msgTarget: 'side',
                    minValue: '02/24/1950',
                    maxValue: '02/24/1990',
                    //width: 210
                },{
                    xtype: 'textfield',
                    fieldLabel: i18n.Place_of_Birth,
                    allowBlank:false,
                    name: 'pob',
                    msgTarget: 'side'
                },/*{
                    xtype: 'compositefield',
                    fieldLabel: 'Phone',
                    // anchor    : '-20',
                    // anchor    : null,
                    msgTarget: 'under',
                    items: [
                        {xtype: 'displayfield', value: '('},
                        {xtype: 'textfield',    name: 'phone1', width: 29, allowBlank: false},
                        {xtype: 'displayfield', value: ')'},
                        {xtype: 'textfield',    name: 'phone2', width: 29, allowBlank: false, margins: '0 5 0 0'},
                        {xtype: 'textfield',    name: 'phone3', width: 48, allowBlank: false}
                    ]
                }*/{
                    xtype: 'textfield',
                    fieldLabel: i18n.Phone,
                    msgTarget: 'under',
                    name: 'phone',
                    allowBlank: false,
                    maskRe: /[0-9]/,
                    msgTarget: 'side'
                },{
                    xtype: 'textfield',
                    fieldLabel: i18n.Email,
                    name: 'email',
                    vtype:'email',
                    msgTarget: 'under',
                    allowBlank: false
                },{
                    xtype: 'fieldset',
                    fieldLabel: i18n.Instant_Messaging + '1 '.sup(),
                    name: 'IM',
                    labelWidth: 50,
                    defaults: {width: 120},
                items:[{
                    xtype: 'textfield',
                    fieldLabel: 'MSN',
                    name: 'msn'
                },{
                    xtype: 'textfield',
                    fieldLabel: 'Skype',
                    name: 'skype'
                }]}  
            ]
        },{
            xtype:'fieldset',
            title: i18n.Previous_Schooling + '2 '.sup(),
            collapsible: false,
            autoHeight:true,
            labelWidth: 150,
           // defaultType: 'textfield',
            items :[{xtype: 'tabpanel',
                activeTab: 0,
                width: 550,
                defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
                title:'Previous Schooling',
                items :[{
                    title: i18n.School + ' 1',
                    layout:'form',
                    defaults: {width: 250},
                    items: [{
                    xtype: 'textfield',
                    fieldLabel: i18n.School_Name,
                    allowBlank:false,
                    //width: 250,
                    name: 'nos1',
                    msgTarget: 'side',
                    maskRe: /([a-zA-Z0-9\s]+)$/
                },{
                    xtype:'fieldset',
                    title: i18n.Language_Medium + '3 '.sup(),
                    collapsible: false,
                    width: 400,
                    autoHeight:true,
                    labelWidth: 50,
                    items :[{
                    xtype: 'radiogroup',
                    fieldLabel: i18n.Tibetan,
                    name: 'Tibetan1',
                    labelWidth: 100,
                    columns: [110, 60, 70, 50],
                    rows: 1,
                    itemCls: 'x-check-group-alt',
                    width: 300,
                    //defaults: {width: 200},
                    allowBlank:false,
                    msgTarget: 'side',
                    //vertical: true,
                   // cls: 'languages',
                    items: [
                            {boxLabel: i18n.Mother_Tongue, name: 'tibetan1', inputValue: i18n.Mother_Tongue},
                            {boxLabel: i18n.Fluent, name: 'tibetan1', inputValue: i18n.Fluent},
                            {boxLabel: i18n.Scholar, name: 'tibetan1', inputValue: i18n.Scholar},
                            {boxLabel: i18n.None, name: 'tibetan1', inputValue: i18n.None}
                            ]
                },{
                    xtype: 'radiogroup',
                    fieldLabel: i18n.Chinese,
                    name: 'Chinese1',
                    columns: [110, 60, 70, 50],
                    rows: 1,
                    width: 300,
                    itemCls: 'x-check-group-alt',
                    allowBlank:false,
                    msgTarget: 'side',
                    items: [
                            {boxLabel: i18n.Mother_Tongue, name: 'chinese1', inputValue: i18n.Mother_Tongue},
                            {boxLabel: i18n.Fluent, name: 'chinese1', inputValue: i18n.Fluent},
                            {boxLabel: i18n.Scholar, name: 'chinese1', inputValue: i18n.Scholar},
                            {boxLabel: i18n.None, name: 'chinese1', inputValue: i18n.None}
                            ]
                },{
                    xtype: 'radiogroup',
                    fieldLabel: i18n.English,
                    name: 'English1',
                    width: 300,
                    columns: [110, 60, 70, 50],
                    rows: 1,
                    itemCls: 'x-check-group-alt',
                    allowBlank:false,
                    msgTarget: 'side',
                    items: [
                            {boxLabel: i18n.Mother_Tongue, name: 'english1', inputValue: i18n.Mother_Tongue},
                            {boxLabel: i18n.Fluent, name: 'english1', inputValue: i18n.Fluent},
                            {boxLabel: i18n.Scholar, name: 'english1', inputValue: i18n.Scholar},
                            {boxLabel: i18n.None, name: 'english1', inputValue: i18n.None}
                            ]
                },{

                    xtype: 'textfield',
                    fieldLabel: i18n.Other,
                    width: 250,
                    emptyText: i18n.Type_Lang,
                    itemCls: 'x-check-group-alt',
                    name: 'other1text',
                    id: 'other1text',
                    maskRe: /([a-zA-Z\s]+)$/
                },{
                    xtype: 'radiogroup',
                    name: 'Other1',
                    columns: [110, 60, 70, 50],
                    rows: 1,
                    width: 300,
                    itemCls: 'x-check-group-alt',
                    msgTarget: 'side',
                    items: [
                            {boxLabel: i18n.Mother_Tongue, name: 'other1', inputValue: i18n.Mother_Tongue},
                            {boxLabel: i18n.Fluent, name: 'other1', inputValue: i18n.Fluent},
                            {boxLabel: i18n.Scholar, name: 'other1', inputValue: i18n.Scholar},
                            {boxLabel: i18n.None, name: 'other1', inputValue: i18n.None}
                            ]
                }]},{
                    xtype: 'datefield',
                    fieldLabel: i18n.Enrollment_Start,
                    allowBlank:false,
                    msgTarget: 'side',
                    name: 'enrollStart1',
                    id: 'enrollStart1',
                    vtype: 'daterange',
                    //width: 250,
                    endDateField: 'enrollEnd1'
                 // minValue: '02/24/1950'
                },{
                    xtype: 'datefield',
                    fieldLabel: i18n.Enrollment_End,
                    allowBlank:false,
                    msgTarget: 'side',
                    name: 'enrollEnd1',
                    id: 'enrollEnd1',
                    vtype: 'daterange',
                   // width: 250,
                    startDateField: 'enrollStart1'
                },{
                    xtype: 'textfield',
                    fieldLabel: i18n.Degree,
                    allowBlank:false,
                    name: 'degree1',
                    msgTarget: 'side',
                    //width: 250,
                    maskRe: /([a-zA-Z0-9\s]+)$/
                }]},{
                title: i18n.School + ' 2',
                layout:'form',
                defaults: {width: 250},
                items: [{
                    xtype: 'textfield',
                    fieldLabel: i18n.School_Name,
                   // allowBlank:false,
                    name: 'nos2',
                    msgTarget: 'side',
                    maskRe: /([a-zA-Z0-9\s]+)$/
                },{

...
...
...

 buttons: [{
            text: i18n.Submit,
            handler: function(){

                    form.getForm().submit({
                        params:{lang: lang},
                        success: function(form, action) {
                               Ext.Msg.alert(i18n.Success, action.result.msg);
                        },
                        failure: function(form, action) {
                            switch (action.failureType) {
                                case Ext.form.Action.CLIENT_INVALID:
                                    Ext.Msg.alert(i18n.Failure, i18n.Client_Error);
                                    break;
                                case Ext.form.Action.CONNECT_FAILURE:
                                    Ext.Msg.alert(i18n.Failure, i18n.Ajax_Error);
                                    break;
                                case Ext.form.Action.SERVER_INVALID:
                                    Ext.Msg.alert(i18n.Failure, action.result.msg);
                                }//end switch
                        }

                    });
            }
        },{
            text: i18n.Reset,
            handler: function(){
                form.getForm().reset();
            }
        }]
    });

        form.render(document.body);

    }); //End Ext.onReady
});//End $.getJSON
});//End $.getScript

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

帅的被狗咬 2024-10-27 03:13:02

如果你查看 Ext JS 源代码，你会发现 vType 是对字段的附加验证，并且执行默认验证。因此，即使您将“daterange”作为新的 vType，也会执行现有的日期检查。

现在，关于用户键入正确的格式..您是在谈论日期格式 m/d/y 和 d/m/y 吗？ format 属性应该处理这个问题。您可以将 format: 'm/d/Y' 设置为两个日期字段。

关于用户输入简单文本而不是日期，我无法复制！您应该显示您的表单代码以及您的问题。
看看这个： 在此处输入图像描述

If you look at the Ext JS source code, you will see that vType is additional validation to the fields and the default validations are executed. So, even if you have 'daterange' as a new vType, the existing date check is executed.

Now, regarding the user keying in the right format.. are you talking about the date format m/d/y and d/m/y ? the format property should take care of this. You can have format: 'm/d/Y' set to both of your datefields.

Regarding user keying in simple text instead of date, I was not able to replicate that! May you should show your form code along with your question.
Have a look at this: enter image description here

回复 原文
不美如何 2024-10-27 03:13:02

我寻找了类似的问题。
我找到了解决方案，也许对您的问题也有帮助。

您可以为您的字段提供附加参数（例如vTypes），将此字段声明为数组。

您可以像这样在任何地方使用它：

field.vtypes.forEach(function(vType)
{
     vErrors[vType] = Ext.data.validations[vType]('', val);
});

您接收一个带有 Vtype 的数组和一个用于错误状态的布尔值；）

i looked for an similar issue.
I found a solution, maybe it is also helpful for your issue.

You can give your field ann additional parameter (e.g. vTypes), declare this field as Array.

Than you are able to use it everywhere like this:

field.vtypes.forEach(function(vType)
{
     vErrors[vType] = Ext.data.validations[vType]('', val);
});

You recive an array with Vtype and a boolean for error state ;)

回复 原文
~没有更多了~

关于作者

↙温凉少女

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文