码迷,mamicode.com
首页 > Web开发 > 详细

Extjs msgTarget 提示位置

时间:2015-11-06 10:59:25      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:

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

 

Extjs msgTarget 提示位置

标签:

原文地址:http://www.cnblogs.com/Darlin356230410/p/4941869.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!