`
jyangzi5
  • 浏览: 207504 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Ext.QuickTips.init() 的一个简单用法及注意事项

    博客分类:
  • Ext
阅读更多

转自:http://blog.linsc.net/read.php?81

 

最近在学习 ext 的例子中,发现好多程序都在第一行使用了如下语句:

Ext.QuickTips.init();

但是QuickTips的用处是什么呢?

我们先来看下面的代码:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Html</title>
<body >
<a href="http://extjs.com" title="ExtJS官方网站">ExtJS</a>
<input type="text" title="请填写 ..."></input>
</body>
</html>



用IE打开后,把属标放到ExtJS上面,可以看到显示一个提示框,如下图:
点击在新窗口中浏览此图片

现在我们在来看下面这代码:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<body >
<a href="http://extjs.com" ext:qtip="ExtJS官方网站">ExtJS</a>
<input type="text" ext:qtip="请填写 ..."></input>

<script type="text/javascript" charset="utf-8">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    });        
</script>
</body>
</html>



用IE打开后,把属标放到ExtJS上面,可以看到显示一个提示框,如下图:
点击在新窗口中浏览此图片

这时,我们可以发现,Ext.QuickTips.init(); 的作用就是把 ext:qtip 的值用于显示提示,作用和前面的例子中的title的作用是一样的。

下面我们改改第二个例子,在<body>后面加上“例子:<br>”,如:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<body >例子:<br>
<a href="http://extjs.com" ext:qtip="ExtJS官方网站">ExtJS</a>
<input type="text" ext:qtip="请填写 ..."></input>

<script type="text/javascript" charset="utf-8">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    });        
</script>
</body>
</html>



这时候,在打开后,属标放上去,显示就有错误了,如下图:点击在新窗口中浏览此图片

这主要是写法不规范造成的,因为那文字内容是直接写在body里了,只要把文件用<p>和</p>把引起来就可以了,如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<body ><p>例子:</p><br>
<a href="http://extjs.com" ext:qtip="ExtJS官方网站">ExtJS</a>
<input type="text" ext:qtip="请填写 ..."></input>

<script type="text/javascript" charset="utf-8">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    });        
</script>
</body>
</html>
分享到:
评论

相关推荐

    ext可编辑表格

    Ext.QuickTips.init(); //格式化日期 function formatDate(value) { return value ? value.dateFormat('Y年m月d日') : ''; } // 别名 var fm = Ext.form; //构造一个只能包含checkbox的列 var ...

    用tip解决Ext列宽度不够的问题

    渲染的函数写成如下: function renderHallName(value, meta, rec, rowIdx, colIdx, ds){ return ‘&lt;div ext:... } 顶部需要加入Ext.QuickTips.init(); qtitle代表tip的标题, qtip代表内容。这时鼠标划过就会出现提示!

    ExtJS正则表达式使用说明

    另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来。特别提示:在属性regex后要用 /^ 这里加正则 $/ 把上面的正则表达式包起来 否则会报”缺少...

    extjs xtype

    有关于ext的xtype,Ext.QuickTips.init(),几种extjs的vtype默认支持的验证

    Ext 表单布局实例代码

    代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = ‘under’; //第...

    ExtAspNet_v2.0beta4_only_examples

    产品名称: ExtAspNet ...-这应该是Extjs3.0的一个BUG,在IE6.0下面设置Ext.QuickTips.init();会导致button的click事件无法响应(IE8下无此问题)。 -目前先禁用IE6的QuickTips。 -优化底层JavaScript。fixed

    ExtJs中简单的登录界面制作方法

    一 首先请看图片 二 登陆界面Ext代码 代码如下: /// ”http:////www.jb51.net/Resources/ExtJs/vswd-ext_2.0.2.js”&gt; //加载提示框 Ext.QuickTips.init(); //创建命名空间 Ext.namespace(‘XQH.ExtJs.Frame’); //...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    Ext.QuickTips.init(); // turn on validation errors beside the field globally //Ext.form.Field.prototype.msgTarget = 'side'; var bd = Ext.getBody(); /* * ================ Form 5 ==============...

    extjs中验证实例

    Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget="under"; var fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:...

    Extjs表单常见验证小结

    代码如下: //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。 Ext.form.Field.prototype.msgTarget=’side’; //提示的方式,枚举值为...

    ExtAspNet_v2.3.2_dll

    -修正DatePicker中的一个bug(31/01/2010将会返回NULL)使用DateFormatString来生成SelectedDate属性(feedback:OktaEndy)。 -修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则...

    ExtJS树形结构.docx

    Ext QuickTips init ; Ext BLANK IMAGE URL &quot;extjs resources images default s gif&quot;; var mytree new Ext tree TreePanel { el : &quot;container&quot; animate : true title : &quot;简单...

    Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享

    在 Extjs 开发中,我们需要屏蔽一些键盘按键,来避免用户在使用键盘... Ext.QuickTips.init(); Ext.getDoc().on("contextmenu", function(e){ e.stopEvent(); }); if(document.addEventListener){ document.addEv

    复选框的且带右键菜单的树代码

    Ext.QuickTips.init(); Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); Ext.onReady(function(){ /************************** 联系人树形菜单**************************/ var ...

    ExtJS4的文本框(textField)使用正则表达式进行验证(Regex)的方法

    另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来。 特别提示:在属性regex后要用 /^ 这里加正则 $/ 把上面的正则表达式包起来否则会报”缺少...

    Extjs4中Form的使用之本地hiddenfield

    代码如下: Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create(“Ext.form.Panel”,{ title:’本地hiddenfield实例’, renderTo:’formDemo’, bodyPadding:’5 5 5 5′, height:100, width:270, frame:true...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    QuickTips:AboutIT QuickTip类型视频的代码和其他学习资料的存储库

    快速提示 AboutIT QuickTip类型视频的代码和其他学习资料的存储库 影片清单 这是“快速提示”类别中所有视频的列表。 它们按时间倒序排列,因此此列表中的第一个视频将始终是最新的。

Global site tag (gtag.js) - Google Analytics