1
我已經看到了一些使用內置vType和自定義字段的示例，但從未將自定義和內置vType組合在一起。例如，這裏是一個我目前使用我的代碼，我從煎茶例子和論壇發現（非常感謝）：ExtJS將多個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
是的，我不明白，要麼...的默認設置被覆蓋。你在那裏顯示的是什麼是_not_與我已經應用vType的日期字段.. – elshae 2011-03-07 14:48:27
嗯，我發現設置'editable：false'可以防止用戶輸入任何東西，所以現在我要去那。我仍然不明白爲什麼它不工作，但:( – elshae 2011-03-07 15:03:51
和感謝您的迴應！:) – elshae 2011-03-07 15:04:17