Ext表單提示方式

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格式的。先驗證是否為空白，然後在驗證格式。
[attachimg]100[/attachimg]

***********************************************************
※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]
});
});

[attachimg]101[/attachimg]

***********************************************************
※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