Extjs msgTarget 提示位置

extjs msgTarget 有效值包括：

 

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

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

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

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

none：不显示提示消息

代码如下：

 

 1 Ext.onReady(function(){
 2   Ext.QuickTips.init();// 初始化显示提示信息。没有它提示信息出不来。
 3  var form = new Ext.form.FormPanel({
 4   title:"提示信息(side)",
 5   height:200,
 6   width:300,
 7   frame:true,
 8   labelSeparator:":",
 9   labelWidth:60,
10   labelAlign:"right",
11   items:[
12    new Ext.form.TextField({
13     fieldLabel : "姓名",
14     allowBlank:false,
15     blankText:"请输入名字",
16     msgTarget:"qtip"  //修改这里的值msgTarget:"title"  msgTarget:"under"  msgTarget:"side"
17    }),
18    new Ext.form.NumberField({
19     fieldLabel:"年龄",
20     allowBlank:false,
21     blankText:"请写年龄",
22     msgTarget:"qtip"
23    })
24   ]
25  });
26  new Ext.Viewport({
27   title:"",
28   items:[form]
29  });
30 });

 

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

 

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

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

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

统一的提示方式实例：

 1 Ext.onReady(function(){
 2  Ext.QuickTips.init();
 3  Ext.form.Field.prototype.msgTarget="side";
 4  var form = new Ext.form.FormPanel({
 5   title:"Ext.form.FormPanel例子",
 6   labelSeparator:":",
 7   labelWidth:60,
 8   bodyStyle:"padding:5 5 5 5",
 9   frame:true,
10   height:120,
11   width:250,
12   items:[
13    new Ext.form.TextField({
14     fieldLabel:"用户名",
15     id:"userName",
16     selectOnFocus:true,  //得到焦点时自动选择文本
17     allowBlank:false,
18     regex:/^([\\w]+)(.[\\w]+)*@([\\w-]+\\.){1,5}([A-Za-z]){2,4}$/,
19     regexText:"用户名格式错误"
20    }),
21    new Ext.form.TextField({
22     fieldLabel:"密码",
23     inputType:"password",
24     allowBlank:false
25    })
26   ]
27  });
28  new Ext.Viewport({
29   title:"",
30   items:[form]
31  });
32 });

 

转载于:https://www.cnblogs.com/Darlin356230410/p/4941869.html