Extjs msgTarget 提示位置

extjs msgTarget 有效值包括：

 

qtip：显示一个浮动的提示消息

title：显示一个浏览器浮动提示消息

under：在字段下面显示一个提示消息，使用under时要注意表单的高度

side：在字段右边显示一个提示消息，使用side是要注意表单的宽度

none：不显示提示消息

代码如下：

 

Ext.onReady(function(){
  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]
 });
});

 

qtip,title,under,side形式的各个效果图：

 

在每个字段上加提示方式很烦琐，

只要在Ext.QuickTips.init();下加一行Ext.form.Field.prototype.msgTarget = "under";//title,qtip,side

就可以实现统一的提示方式了。
 

统一的提示方式实例：

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