Ext.QuickTips.init(); 
 Ext.form.Field.prototype.msgTarget = 'side';

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

http://blog.163.com/xjueia@126/blog/static/11374035720090146723591/

Ext表单提示方式:msgTarget的更多相关文章

  1. html表单提交方式

    xml 表单提交方式: * 使用submit提交 <form> 要提交的数据 <input type="submit" /'> </form> ...

  2. Servlet路径跳转1---使用相对路径和绝对路径,在页面上调用servlet的路径写法(超链接的方式和表单的方式)

    课程1-13   http://www.imooc.com/video/5554 Servlet路径跳转: 绝对路径:放在任何地方都对的路径 相对路径:相对于当前资源的路径 index文件 加上/,表 ...

  3. ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

    最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...

  4. HTML5表单提示placeholder属性兼容IE

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  5. JavaWeb学习日记----表单提交方式

    1.表单提交方式 (1) 使用input控件中的submit提交 代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  6. poshytip漂亮的表单提示插件

    一款很实用的小插件,在表单的输入框会显示提示信息,你可能会用的它. 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  7. form表单提交方式

    form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交 ...

  8. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

  9. jquery如何实现表单post方式提交

    jquery如何实现表单post方式提交 一.总结 一句话总结:即使js给form对象提供了submit()方法,那也不意为表单中可以不写提交按钮这个元素,即form表单依然需要五脏俱全才可以使用js ...

随机推荐

  1. Shell学习笔记:<<EOF子命令

    在shell编程中,“EOF”通常与“<<”结合使用,“<<EOF”表示后续的输入作为子命令或子shell的输入,直到遇到“EOF”,再次返回到主调用shell,可将其理解为分 ...

  2. C# Except

    我们往往需要把一个列表中,去除另外一个列表的元素,C#提供了很好的方法,Except. 但是往往不小心就掉进坑里了. 看下面的代码: static void Main(string[] args) { ...

  3. 实时流计算、Spark Streaming、Kafka、Redis、Exactly-once、实时去重

    http://lxw1234.com/archives/2018/02/901.htm

  4. 【LOJ】#2292. 「THUSC 2016」成绩单

    题解 神仙dp啊><(也有可能是我菜) 我们发现,想要拿一段区间的话,只和这个区间的最大值和最小值有关系,那么我们考虑,如果一个区间[l,r]我们拿走了一些数后,使它的最小值是a,最大值是 ...

  5. Numpy的简单用法

    Numpy的简单用法 import numpy as np 一.创建ndarray对象 列表转换成ndarray: >>> a = [1,2,3,4,5] >>> ...

  6. mysql的第一个程序

    每次写java链接数据怎么写,这一次做一个总结,方便参考. 1.在mysql上下载mysql驱动jar包 2.下载的驱动包 3.程序目录 4.程序 package mysqlTest; import ...

  7. 部署 LAMP

    部署 LAMP https://help.aliyun.com/document_detail/50774.html?spm=a2c4g.11186623.6.773.Em8xVc 文档提供方:上海驻 ...

  8. CSUOJ 1895 Apache is late again

    Description Apache is a student of CSU. There is a math class every Sunday morning, but he is a very ...

  9. [代码审计]eml企业通讯录管理系统v5.0 存在sql注入

    0x00 前言 上周五的时候想练练手,随便找了个系统下载下来看看. 然后发现还有VIP版本,但是VIP要钱,看了一下演示站,貌似也没有什么改变,多了个导入功能?没细看. 搜了一下发现这个系统,压根就没 ...

  10. To 初识Java的小菜菜们 嘻嘻~

    一.Java Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言.Java 技术具有卓越的通用性.高效性.平台移植性和安全性,广泛应用于PC.数据中心.游戏控制台.科学超级计算机.移动电话和 ...