`
daniel514
  • 浏览: 2043 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

慎用Ext.QuickTip和Ext.QuickTips

阅读更多
因为项目需求,今天特意翻看Ext.QuickTip的源代码:


特意上两段代码:

代码1:

// private 
    initComponent : function(){

// 注意this.target 
        this.target = this.target || Ext.getDoc(); 
        this.targets = this.targets || {}; 
        Ext.QuickTip.superclass.initComponent.call(this); 
    }, 
// 注意this.target 的赋值


代码2:

// private
    onTargetOver : function(e){
        if(this.disabled){
            return;
        }
        this.targetXY = e.getXY();
        var t = e.getTarget();
        if(!t || t.nodeType !== 1 || t == document || t == document.body){
            return;
        }
        if(this.activeTarget && t == this.activeTarget.el){
            this.clearTimer('hide');
            this.show();
            return;
        }
        if(t && this.targets[t.id]){
            this.activeTarget = this.targets[t.id];
            this.activeTarget.el = t;
            this.delayShow();
            return;
        }
        var ttp, et = Ext.fly(t), cfg = this.tagConfig;
        var ns = cfg.namespace;

....
   }



代码1很明确地告诉我们,如果不特定指定target的话,Extjs会默认将Document作为Target,会监听Document发出的mousemove事件

代码1也很明确地告诉我们,如果我们的Javascript中有Ext.QuickTips.init();这一句,那么只要我们在页面随意划一下鼠标,onTargetOver 事件肯定执行很多遍。


天啊,使用Extjs 的朋友们:Ext.QuickTips.init();这种很普遍的使用方式,就变得很恐怖了。只要我们一动鼠标,CPU就会拼命计算,瞬间暴涨。

为什么觉得ExtJS慢,答案就在这。


为了验证想法,我测试一下,CPU瞬间彪起来。




对于Tooltip还是自己改写好吧!
  • 大小: 101.9 KB
分享到:
评论

相关推荐

    ext常用注释

    Ext.QuickTips.init(); ``` 调用 `init` 方法初始化提示工具,这使得可以在任何地方添加提示信息。 ### 2. Ajax 请求处理 #### 2.1 发送Ajax请求 使用 `Ext.Ajax.request` 方法可以轻松发送Ajax请求,并处理服务器...

    用ext来登录的程序代码

    - **表单初始化**: `Ext.QuickTips.init();` 启用了快速提示功能。 - **表单配置**: - `labelWidth`: 定义了表单标签的宽度。 - `baseCls`: 设置了基本的CSS类名。 - `defaults` 和 `defaultType`: 分别设置了...

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

    这是通过调用`Ext.QuickTips.init()`实现的。这行代码告诉ExtJS解析页面上的`ext:qtip`属性,并为相应的元素设置提示功能。 这样,当用户将鼠标悬停在含有`ext:qtip`属性的元素上时,就会弹出一个带有标题和内容的...

    Ext 表单布局实例代码

    `Ext.QuickTips.init()`是初始化快速提示功能的,这个功能可以为表单中的元件提供提示信息。在表单验证中,这些提示信息通常用来显示客户端验证的错误信息。 `Ext.form.Field.prototype.msgTarget = 'under';`这行...

    grid js 例子一个 ext 的

    - **Ext.QuickTips.init()**:初始化快速提示功能。 - **CheckboxSelectionModel**:创建一个复选框选择模型,允许用户多选行。 - **ColumnModel**:定义 Grid 的列模型,其中包括行号、选择复选框以及两列数据(`id...

    ext可编辑表格

    2. **Ext.QuickTips.init()**:初始化快速提示功能,当鼠标悬停在表格元素上时,可以显示预设的提示信息。 3. **formatDate**:这是一个自定义的日期格式化函数,用于将日期对象转换为指定格式的字符串,例如'Y年m...

    extjs xtype

    EXTJS 是一个流行的JavaScript框架,用于构建富...在EXTJS开发中,理解和熟练运用`xtype`、`Ext.QuickTips.init()`以及`vtype`能够帮助我们更高效地构建用户界面,提供更好的用户体验,同时确保数据的准确性和安全性。

    EXT 完美教程

    Ext.QuickTips.init(); var field0 = new Ext.form.TextField({ fieldLabel: '名字', allowBlank: false, width: 500, emptyText: '请输入', maxLength: 10, minLength: 2 }); var field1 = new Ext.form....

    extjs菜单的开发

    Ext.QuickTips.init(); // 创建日期选择菜单 var dateMenu = new Ext.menu.DateMenu({ handler: function(dp, date) { Ext.MessageBox.alert('日期选择', '选择日期为: ' + date.format('Y/m/d'), ''); } }...

    ext2.0中文语言包gb2312格式

    Ext.QuickTips.init(); Ext.util.Format.defaultDateFormat = 'Y-m-d'; // 引用中文语言包 Ext.lang.Language.load('path/to/ext-lang-zh_CN.js'); // 然后初始化你的EXT JS应用 }); ``` 综上所述,EXT JS ...

    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:qtip`属性的元素,以显示工具提示。 #### 控件状态属性 - `disabled`: 设置控件是否禁用。 - `hidden`: 设置控件是否隐藏。 ...

    Ext学习笔记-个人版.doc

    在示例中,`Ext.QuickTips.init()`初始化了快速提示功能,这样表单字段就能显示验证提示。`Ext.form.Field.prototype.msgTarget="side"`设置提示信息显示的位置,这里选择在字段旁边显示,`msgTarget`可以是`"side"`...

    Ext控件大全,适合新手学习

    Ext.QuickTips.init(); ``` ### 四、总结 通过对Ext控件的深入了解,我们不仅掌握了创建基本控件的方法,还学会了如何使用更高级的功能来增强用户体验。Ext JS 的强大之处在于它能够帮助开发者快速构建复杂的Web...

    Extjs验证表单 Extjs验证表单

    Ext.QuickTips.init(); // 启用提示信息支持 ``` 接下来,设置所有表单字段的提示信息显示方式,默认使用“qtip”方式: ```javascript Ext.form.Field.prototype.msgTarget = "qtip"; ``` 这里,“qtip”表示使用...

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

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

    ExtJS正则表达式使用说明

    代码如下:Ext.onReady(function(){ Ext.QuickTips.init();});ExtJS的Regex的验证属性分两种情况,一种是只有红色提示框;另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips....

Global site tag (gtag.js) - Google Analytics