Extjs msgTarget 提示位置

Extjs msgTarget 提示位置

extjs msgTarget 有效值包括:

qtip:显示一个浮动的提示消息

title:显示一个浏览器浮动提示消息

under:在字段下面显示一个提示消息,使用under时要注意表单的高度

side:在字段右边显示一个提示消息,使用side是要注意表单的宽度

none:不显示提示消息

实例:

  •  
  • JScript 代码   复制
  • 
    Ext.onReady(function(){
      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]
     });
    });
    
    		
  •  qtip,title,under,side形式的各个效果图

    在每个字段上加提示方式很烦琐,


    只要在Ext.QuickTips.init();下加一行Ext.form.Field.prototype.msgTarget = "under";//title,qtip,side


    就可以实现统一的提示方式了。
     

    统一的提示方式实例:

  •  
  • JScript 代码   复制
  • 
    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]
     });
    });
    
    		
  • 标签: