转自:https://www.cnblogs.com/guafuli/articles/msgtarget_values.html
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

7. ExtJS.form中msgTarget的更多相关文章

  1. Extjs Form用法详解(适用于Extjs5)

    Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. 本文的示例代码适用于Ex ...

  2. 实用ExtJS教程100例-011:ExtJS Form 使用JSON数据赋值和取值

    上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新E ...

  3. ExtJS入门教程03,form中怎能没有validation

    接上篇内容,我们在学会extjs form的基本用法之后,今天我们来看看extjs form的validation功能. 必填项,就是不能为空(allowBlank) 效果: 代码: { xtype: ...

  4. ExtJs 4 中的MVC应用架构

    一.ExtJs 4.x MVC模式的原理与作用 大规模客户端应用通常不好实现不好组织也不好维护,因为功能和人力的不断增加,这些应用的规模很快就会超出掌控能力,ExtJS4带来了一个新的应用架构,不但可 ...

  5. extjs form 取值 赋值 重置

    一.从form中获取field的三个方法: 1.Ext.getCmp('id'); 2.FormPanel.getForm().findField('id/name'); 3.Ext.get('id/ ...

  6. Extjs form 组件

    1.根类 Ext.form.Basic 提供了,表单组件,字段管理,数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关联 Ext.form.Basic 的实例 ...

  7. 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据

    ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...

  8. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  9. 93.EXTJS Form之VTypes

    转自:http://blog.sina.com.cn/s/blog_7778950d0100y2pg.html 本文我们主要探讨一下EXTJS的Form中验证的问题,可能用过EXTJS的Form的人都 ...

随机推荐

  1. crm项目之stark组件前戏(二)

    stark组件的设计主要来源于django中admin的功能,在django admin中只需要将模型表进行注册,就可以在页面对该表进行curd的动作,那么django admin是如何做的呢? 在d ...

  2. sscanf,sprintf

    sprintf函数 sprintf函数原型为 int sprintf(char str, const char format, ...).作用是格式化字符串,具体功能如下所示: 将数字变量转换为字符串 ...

  3. java读utf8 的txt文件,第一个字符为空或问号问题

    参考:https://blog.csdn.net/yangzhichao888/article/details/79529756 https://blog.csdn.net/wangzhi291/ar ...

  4. AndroidSweetSheet:从底部弹出面板(1)

     AndroidSweetSheet:从底部弹出面板(1) AndroidSweetSheet又是一个从底部弹出面板的开源项目.我在以前写的文章中介绍了不少这些项目,见附录文章5,6,7,8.现在 ...

  5. hdu 3657 最小割(牛逼!!!!)总算理解了

    <strong></strong> 转载:http://blog.csdn.net/me4546/article/details/6662959 加颜色的太棒了!!! 在网上看 ...

  6. SQLAlchemy(2):多表操作 & 连接方式及原生SQL

    一对多:ForeignKey multitb_models.py import datetime from sqlalchemy import create_engine # 引入 创建引擎 from ...

  7. Python模块:configparser、hashlib、(subprocess)

    configparser模块: 此模块用于生成和修改常见配置文档. 一个常见配置文件(.ini的后缀名)格式如下: [DEFAULT] # DEFAULT 是指后面的字典里都会默认有的内容 Serve ...

  8. [NOIP2004] 提高组 洛谷P1090 合并果子

    题目描述 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每一次合并,多多可以把两堆果子合并到一起,消耗的体力等于两堆果子的重量之和.可 ...

  9. 2.3 comparator(比较器)

    1.comparator是java的一种机制,用来帮助我们给相同对象的不同属性排序 2.Comparable接口,是一个对象本身就已经支持自比较所需要实现的接口,如String,Integer自己就已 ...

  10. 修改xampp的mysql默认密码

    MySQL 的“root”用户默认状态是没有密码的,所以在 PHP 中您可以使用 mysql_connect("localhost","root"," ...