转自:https://blog.csdn.net/a1542aa/article/details/24295791

ExtJS.form中msgTarget

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.form.Field.prototype.msgTarget,就需要在每个控件的属性上加msgTarget:“xx”,来设置
提示的位置)
只要在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

47. Ext.form.Field.prototype.msgTarget的更多相关文章

  1. ExtJs之Ext.form.field.TimePicker DatePicker组合框

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  2. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

  3. 重写 Ext.form.field 扩展功能

    直接代码,放项目overrides文件夹中即可 //重写类 表单父类 //支持allowBlank动态绑定 Ext.define("override.form.field.Base" ...

  4. ExtJs之Ext.form.field.ComboBox组合框

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  5. Ext.form.field.Picker (ComboBox、Date、TreePicker、colorpick.Field)竖向滚动导致布局错误

    ComboBox.Date.TreePicker.colorpick.Field这些继承了Ext.form.field.Picker的控件. 在6.0.0和6.0.1中,在界面中存在竖向滚动条时,点击 ...

  6. ExtJs Ext.form.field.TextArea+Ckeditor 扩展富文本编辑器

    Ext.define("MyApp.base.BaseTextArea", { extend: "Ext.form.field.TextArea", xtype ...

  7. 学习EXTJS6(8)基本功能-表单的基础表字段Ext.form.field.Basic

    Ext.form.field.Basic是表单字段的基类. Ext.form.field.Text Ext.form.field.TextArea Ext.form.field.Number Ext. ...

  8. Javascript - ExtJs - Ext.form.Panel组件

    FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有 ...

  9. 8. Ext文本输入框:Ext.form.TextField属性汇总

    转自:https://blog.csdn.net/ryuudenne/article/details/8834650 Ext.form.TextField主要配置表: allowBlank       ...

随机推荐

  1. Android开发技巧一--weight属性实现视图的居中(半)显示

    面试时,一位面试官问到:“如果我想讲按钮居中显示,并且占据其父视图宽度的一半,应该怎么做到呢?”即实现这种效果: 我们使用weightSum属性和layout_weight属性实现这一要求: < ...

  2. acm相关(纯转载)

    我觉得很好的文章,之所以放随笔是为了让大家看到这些优秀的博文 acm如何起步 acm重点题型 动态规划题目总结 背包九讲阅读网站

  3. UVA - 10723 Cyborg Genes (LCS)

    题目: 思路: 求两个串的最长公共子序列,则这个最短的串就是给出的两个串的长度和减去最长公共子序列的长度. 状态转移方程: 如果s[i-1]==t[j-1]就有dp[i][j] = dp[i-1][j ...

  4. UVA 674 Coin Change (完全背包)

    解法 dp表示目前的种数,要全部装满所以f[0]=1其余为0的初始化是必不可少的 代码 #include <bits/stdc++.h> using namespace std; int ...

  5. 作业 3-5 switch语句的应用

    /*输入五级制成绩(A-E),输出相应的百分制成绩(0-100)区间*/ #include<stdio.h> int main(void) { char ch;/*定义一个字符*/ pri ...

  6. MyBatis 的基本要素—SQL 映射文件

    MyBatis 真正的强大在于映射语句,相对于它强大的功能,SQL 映射文件的配置却是相当简单.对比 SQL 映射配置和 JDBC 代码,发现使用 SQL 映射文件配置可减少 50% 以上的代码,并且 ...

  7. Python单例模式的实现方式

    一.单例类 单例模式(Singleton Pattern)是 Python 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式涉及到一个单一的类,该类 ...

  8. vue-cli中src/main.js 的作用

    // The Vue build version to load with the `import` command // (runtime-only or standalone) has been ...

  9. 51nod1128 正整数分组V2

    [题解] 二分一个最大值,check一下分出来的组数是否小于等于k即可. #include<cstdio> #include<algorithm> #define LL lon ...

  10. Java基础学习总结(85)——Java中四种线程安全的单例模式实现方式