<转>Extjs中的提示信息用法

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();// 初始化显示提示信息。没有它提示信息出不来。
 Ext.form.Field.prototype.msgTarget = "side";


 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/xiao_mege/blog/static/729427532011327104847120/