`
roc08
  • 浏览: 227194 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Firefox 18 javascript编译器 IonMonkey 引起的extjs 布局混乱问题

阅读更多
最近测试反应系统在火狐18版本下偶尔会出现页面布局混乱的问题,出现频率还挺高,于是查了下,没有找到具体原因,不过开启firebug调试后,基本就不会出现问题了。在extjs论坛上看到已经有人发帖反应了,原因是由于18采用了最新的js编译引擎IonMonkey,他在编译extjs代码时有个bug导致的,

错误信息

引用
TypeError: callOverrideParent.caller is null
.../extjs/ext-all-dev.js Line: 37

具体原因是由于此段代码编译有问题
Ext.Base的callParent方法编译有问题,
解决方法1,覆写callParent方法,加入try catch块

if (Ext.firefoxVersion >= 18) {
    var noArgs = [];
    Ext.override(Ext.Base, {
        callParent : function(args) {


            var method, superMethod = (method = this.callParent.caller) &&
                    (method.$previous || ((method = method.$owner ?
                            method :
                            method.caller) && method.$owner.superclass[method.$name]));


            // Workarround for Firefox 18. I don't know why this works, but it does. Perhaps functions wich have 此处加入try catch后编译器将不再编译此方法
            // a try-catch block are handled differently
            try {} catch (e) {}
            return superMethod.apply(this, args || noArgs);
        }
    });
}

解决方法2:
firefox bug帖子上说18+的版本修复了这个bug,因此17号发布的18.0.1和19beta版应该都没有这个问题了,升级浏览器即可。

附加入try catch后问题解决的原因:
引用

The reason it's not reproducible is because it happens during some JIT compiling, so it's not really something we can "fix", since the symptom happens almost at random. The reason the try/catch works is because methods with try catch blocks don't get compiled.
The FF bug is here: https://bugzilla.mozilla.org/show_bug.cgi?id=818023


参考资料:
1.extjs问题帖子:http://www.sencha.com/forum/showthread.php?253345-FF-18-problem&s=4bf9757321c9fa4cb39a2ea4f7231662
2.firefox bug地址:https://bugzilla.mozilla.org/show_bug.cgi?id=818023
0
0
分享到:
评论

相关推荐

    ExtJS布局之border实例

    资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...

    Extjs布局实例

    Extjs布局实例

    EXTJS可视化网页编译器

    EXTJS是一种基于JavaScript的前端框架,它提供了丰富的组件库,用于构建复杂的、数据驱动的Web应用程序。EXTJS可视化网页编译器是EXTJS框架的一个重要工具,它允许开发者通过直观的图形界面来设计和编译EXTJS应用,...

    ExtJs布局教程Ext详细布局

    ExtJS布局是构建用户界面的关键部分,特别是在使用ExtJS库时。本文主要讲解ExtJS的Column布局,一种非常灵活的布局方式,可以帮助开发者创建复杂的、响应式的用户界面。 Column布局在ExtJS中用于将容器(如Panel)...

    Extjs 布局生成器(ext布局本地版本)

    Extjs 布局生成器,可以生产各布局查看布局代码

    EXTJS学习,webform+mvc routeing extjs布局 适合初学者

    EXTJS学习,webform+mvc routeing extjs布局 适合初学者

    ExtJS布局练习例

    从给定的文件信息来看,我们正在探讨的是ExtJS框架中的布局管理技术。ExtJS是一个用JavaScript编写的开源用户界面库,它提供了大量的组件和工具,用于构建复杂的、响应式的Web应用程序。布局管理是ExtJS的一个核心...

    JavaScript框架jQuery和ExtJS的对比研究.pdf

    "JavaScript框架jQuery和ExtJS的对比研究" 本文将对JavaScript框架jQuery和ExtJS进行对比研究,旨在帮助Web开发者选择合适的JavaScript框架。 JavaScript框架的重要性 随着Web 2.0时代的到来,Web应用程序越来越...

    extjs布局管理学习指南

    ### ExtJS布局管理学习指南 #### 一、引言 ExtJS是一款强大的JavaScript框架,用于构建复杂的前端应用程序。其中布局管理是ExtJS的核心特性之一,它可以帮助开发者有效地组织UI组件,使得用户界面既美观又实用。...

    extjs页面布局生成器

    很好的ext页面布局自动生成功能,快速布局,减少你页面开发时间!用法:解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了,代码在查看/修改中可以看到,只需复制粘贴到自己...

    EXTJs江湖 JavaScript框架

    EXT江湖 ExtJs ,javascript 有兴趣的人看看吧

    ExtJS Ext ExtJavascript Javascript

    ExtJS 是一个强大的JavaScript前端框架,专为构建富交互式的Web应用程序而设计。它提供了丰富的组件库、数据绑定、布局管理、以及强大的Ajax功能,帮助开发者创建出具有桌面级用户体验的网页应用。ExtJS 使用了Sass...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    Extjs 计算器 javascript计算器

    ExtJS 是一个强大的JavaScript应用程序框架,专用于构建复杂的、数据驱动的Web应用。在这个特定的项目中,“Extjs 计算器 javascript计算器”是利用ExtJS的XTemplate功能创建的一个模拟Windows简单计算器的Web应用。...

    Extjs4.1布局与树

    纯Extjs代码,对初学Ext有点点帮助

    ExtjS--accordion布局

    ExtJS 是一个强大的JavaScript 库,专用于构建富客户端Web应用程序。它提供了丰富的组件和布局管理功能,使得开发者能够创建复杂、交互式的用户界面。在本篇博客中,我们将聚焦于"accordion布局"这一特性,它是ExtJS...

    ExtJS3.2列布局

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序。在3.2版本中,它提供了丰富的组件和布局管理机制,使得开发者可以构建出复杂的、响应式的用户界面。"ExtJS3.2列布局"是这个框架中的一个重要概念,...

    JAVASCRIPT DIV 弹层(模仿EXTJS)

    当我们想要在自己的项目中实现类似EXTJS的弹层效果时,可以借助JavaScript和CSS来创建。 首先,我们要理解Div的基本概念。在HTML中,Div是一个块级元素,可以用来组织页面布局。通过CSS,我们可以控制Div的样式,...

Global site tag (gtag.js) - Google Analytics