转自: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. 灰度直方图均衡化----python实现

    直方图均衡化是使用图像直方图进行对比度调整的图像处理的方法. 该方法通常会增加许多图像的整体对比度,尤其是当图像的可用数据由接近的对比度值表示时. 通过这种调整,强度可以更好地分布在直方图上. 这允许 ...

  2. Leetcode 208.实现前缀树

    实现前缀树 实现一个 Trie (前缀树),包含 insert, search, 和 startsWith 这三个操作. 示例: Trie trie = new Trie(); trie.insert ...

  3. Django组件:(6)cookie 和 session

    会话:会话可理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应:在JavaWeb中,客户向某一服务器发出第一个请求开始,会话就开始了,直到客户关闭了浏览器会话结束. 在一个会话的 ...

  4. Linux下汇编语言学习笔记2 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  5. Layui导航、面包屑

    物不在多,有用则精! 学习使用链接 导航:导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在.面包屑结构简单,支持自定义分隔符.千万不要忘了加载 elem ...

  6. css3 模拟标牌震荡效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. 几种常见排序算法的java实现

    一.几种常见的排序算法性能比較 排序算法 最好时间 平均时间 最坏时间 辅助内存 稳定性 备注 简单选择排序 O(n^2) O(n^2) O(n^2) O(1) 不稳定 n小时较好 直接插入排序 O( ...

  8. Chrom开发者工具详解

    Chrome开发者工具不完全指南(一.基础功能篇) http://www.mamicode.com/info-detail-863534.html Chrome开发者工具不完全指南(二.进阶篇) ht ...

  9. Application特征

    1.位置:服务器内存,执行速度快2.使用范围:整个应用程序3.类型:任意类型4.声明周期:应用程序开始创建到销毁

  10. ubuntu语言设置成汉语

    打开设置system setting,进入语言支持,有语言和地区格式.下载须要的语言并应用到整个系统. 按说明来就可以 这样的方法使得部分英语变为汉语.