zoukankan      html  css  js  c++  java
  • Extjs msgTarget 提示位置

    extjs msgTarget 有效值包括:

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

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

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

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

    none:不显示提示消息

    代码如下:

     1 Ext.onReady(function(){
     2   Ext.QuickTips.init();// 初始化显示提示信息。没有它提示信息出不来。
     3  var form = new Ext.form.FormPanel({
     4   title:"提示信息(side)",
     5   height:200,
     6   300,
     7   frame:true,
     8   labelSeparator:":",
     9   labelWidth:60,
    10   labelAlign:"right",
    11   items:[
    12    new Ext.form.TextField({
    13     fieldLabel : "姓名",
    14     allowBlank:false,
    15     blankText:"请输入名字",
    16     msgTarget:"qtip"  //修改这里的值msgTarget:"title"  msgTarget:"under"  msgTarget:"side"
    17    }),
    18    new Ext.form.NumberField({
    19     fieldLabel:"年龄",
    20     allowBlank:false,
    21     blankText:"请写年龄",
    22     msgTarget:"qtip"
    23    })
    24   ]
    25  });
    26  new Ext.Viewport({
    27   title:"",
    28   items:[form]
    29  });
    30 });

    qtip,title,under,side形式的各个效果图:

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


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


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

    统一的提示方式实例:

     1 Ext.onReady(function(){
     2  Ext.QuickTips.init();
     3  Ext.form.Field.prototype.msgTarget="side";
     4  var form = new Ext.form.FormPanel({
     5   title:"Ext.form.FormPanel例子",
     6   labelSeparator:":",
     7   labelWidth:60,
     8   bodyStyle:"padding:5 5 5 5",
     9   frame:true,
    10   height:120,
    11   250,
    12   items:[
    13    new Ext.form.TextField({
    14     fieldLabel:"用户名",
    15     id:"userName",
    16     selectOnFocus:true,  //得到焦点时自动选择文本
    17     allowBlank:false,
    18     regex:/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
    19     regexText:"用户名格式错误"
    20    }),
    21    new Ext.form.TextField({
    22     fieldLabel:"密码",
    23     inputType:"password",
    24     allowBlank:false
    25    })
    26   ]
    27  });
    28  new Ext.Viewport({
    29   title:"",
    30   items:[form]
    31  });
    32 });
  • 相关阅读:
    Excel中删除含有空值的整行或是整列
    Power Pivot(二)
    Power Pivot(一)
    携程数据清洗
    Matplotlib基础绘图
    Pandas 数据清洗常见方法
    天猫美妆数据清洗步骤概括
    淘宝美妆双十一数据可视化(下)
    淘宝美妆双十一数据清洗(上)
    乐高天猫旗舰店数据分析
  • 原文地址:https://www.cnblogs.com/Darlin356230410/p/4941869.html
Copyright © 2011-2022 走看看