Ext表單提示方式：msgTarget:有4中方式：qtip,title,under,side
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="resources/images/default/s.gif";
Ext.QuickTips.init();// 初始化顯示提示信息。沒有它提示信息出不來。
var form = new Ext.form.FormPanel({
title:"提示信息(side)",
height:200,
width:300,
frame:true,
labelSeparator:":",
labelWidth:60,
labelAlign:"right",
items:[
new Ext.form.TextField({
fieldLabel : "姓名",
allowBlank:false,
blankText:"請輸入名字",
msgTarget:"qtip" //修改這裏的值msgTarget:"title" msgTarget:"under" msgTarget:"side"
}),
new Ext.form.NumberField({
fieldLabel:"年齡",
allowBlank:false,
blankText:"請寫年齡",
msgTarget:"qtip"
})
]
});
new Ext.Viewport({
title:"",
items:[form]
});
});
如圖：
使用under時要注意表單的高度，高度不夠的話就會出現如下狀況：
圖
使用side是要注意表單的寬度，寬度不夠就會出現如下狀況：
圖
在每一個字段上加提示方式很煩瑣，
只要在Ext.QuickTips.init();下加一行Ext.form.Field.prototype.msgTarget = "under";//title,qtip,side
就能夠實現統一的提示方式了。
***********************************************************
※Ext.form.TextField※
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget="side";
var form = new Ext.form.FormPanel({
title:"Ext.form.FormPanel例子",
labelSeparator:":",
labelWidth:60,
bodyStyle:"padding:5 5 5 5",
frame:true,
height:120,
width:250,
items:[
new Ext.form.TextField({
fieldLabel:"用戶名",
id:"userName",
selectOnFocus:true, //獲得焦點時自動選擇文本
allowBlank:false,
regex:/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
regexText:"用戶名格式錯誤"
}),
new Ext.form.TextField({
fieldLabel:"密碼",
inputType:"password",
allowBlank:false
})
]
});
new Ext.Viewport({
title:"",
items:[form]
});
});
這裏驗證用戶名必須是email格式的。先驗證是否爲空，而後在驗證格式。
***********************************************************
※Ext.form.TextArea※
Ext.onReady(function(){
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
title:"Ext.form.TextArea例子",
labelSeparator:":",
labelWidth:60,
bodyStyle:"padding:5 5 5 5",
frame:true,
height:150,
width:250,
items:[
new Ext.form.TextArea({
id:"memo",
width:150,
fieldLabel:"備註"
})
],
buttons:[{text:"肯定",handler:showValue}]
});
function showValue(){
var memo = form.findById("memo"); //得到輸入控件
alert(memo.getValue()); //取得空間值
};
new Ext.Viewport({
title:"",
items:[form]
});
});
***********************************************************
※Ext.form.NumberField※
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget="side";
var form = new Ext.form.FormPanel({
title:"Ext.form.NumberField例子",
labelSeparator:":",
labelWidth:60,
bodyStyle:"padding:5 5 5 5",
frame:true,
height:150,
width:250,
items:[
new Ext.form.NumberField({
fieldLabel:"整數",
allowDecimals:false, //不容許輸入小數
nanText:"請輸入有效數字", //無效數字提示
allowNegative:false //不容許輸入負數
}),
new Ext.form.NumberField({
fieldLabel:"小數",
decimalPrecision:2, //精確到小數點後2位
allowDecimals:true,
nanText:"請輸入有效數字",
allowNegative:false
}),
new Ext.form.NumberField({
fieldLabel:"數字限制",
baseChars:"12345" // 輸入數字範圍
}),
new Ext.form.NumberField({
fieldLabel:"數值限制",
maxValue:100, //最大值
minValue:50 //最小值
})
]
});
new Ext.Viewport({
title:"",
items:[form]
});
});
decimalPrecision會四捨五入。當小數保留2位時，14.23545，焦點離開後會變成 14.24
