Ext JS 6应用程序Build后出现“c is not a constructor return new c(a[0])”的处理
概述
在对Ext JS 6的应用程序打包后,时不时会出现以下错误:
由于是压缩后出现的错误,要进行调试也无从下手,因而这个错误会令新手手足无措,不知道是怎么回事。
错误原因
造成该错误的主要原因是要创建的类在打包时没有包含在包内,又或者是类名错误造成的。我遇到的一个比较典型的错误就是在requires中使用了Ext.MessageBox而不是Ext.window.MessageBox,就会出现该错误。
解决办法
虽然知道该错误是由于类名造成的,但苦于无法知道是那个文件中的requires出现的问题,因而要解决这个问题也很棘手,不过主要有足够耐心,还是能解决的。
该错误出现的地方是在应用程序ext\packages\core\src\class目录下的ClassManager.js文件中的getInstantiator方法内,代码如下:
getInstantiator: function(length) {
var instantiators = this.instantiators,
instantiator,
i,
args;
instantiator = instantiators[length];
if (!instantiator) {
i = length;
args = [];
for (i = 0; i < length; i++) {
args.push('a[' + i + ']');
}
instantiator = instantiators[length] = new Function('c', 'a', 'return new c(' + args.join(',') + ')');
//<debug>
instantiator.name = "Ext.create" + length;
//</debug>
}
return instantiator;
},
错误中的代码就是由“instantiator=”这句代码(文件的895行)自动生成的。这段代码的主要作用是创建一个新的类实例并返回该实例,而当该类不存在或类名错误的时候,因为创建不了类的实例,就会出现错误。
出现问题的地方已经找到,但要解决问题,不能在这里,因为在该函数内要查找是那个类出现错误,也很困难,因为调用该类的时候传递给该类的可能是一个空的类名,因而,需要在调用该方法时去查。
通过在ClassManager.js文件中搜索getInstantiator,会发现在create方法内调用了该方法,代码如下:
create: function () {
var name = arguments[0],
nameType = typeof name,
args = arraySlice.call(arguments, 1),
cls;
if (nameType === 'function') {
cls = name;
} else {
if (nameType !== 'string' && args.length === 0) {
args = [name];
if (!(name = name.xclass)) {
name = args[0].xtype;
if (name) {
name = 'widget.' + name;
}
}
}
//<debug>
if (typeof name !== 'string' || name.length < 1) {
throw new Error("[Ext.create] Invalid class name or alias '" + name +
"' specified, must be a non-empty string");
}
//</debug>
name = Manager.resolveName(name);
cls = Manager.get(name);
}
// Still not existing at this point, try to load it via synchronous mode as the last resort
if (!cls) {
//<debug>
//<if nonBrowser>
!isNonBrowser &&
//</if>
Ext.log.warn("[Ext.Loader] Synchronously loading '" + name + "'; consider adding " +
"Ext.require('" + name + "') above Ext.onReady");
//</debug>
Ext.syncRequire(name);
cls = Manager.get(name);
}
//<debug>
if (!cls) {
throw new Error("[Ext.create] Unrecognized class name / alias: " + name);
}
if (typeof cls !== 'function') {
throw new Error("[Ext.create] Singleton '" + name + "' cannot be instantiated.");
}
//</debug>
return Manager.getInstantiator(args.length)(cls, args);
},
注意最后一句,可以看到调用getInstantiator方法,传递了两个参数,而第一参数,根据上面的代码可知道这就是类名或类自身,这时候,一般通过在return语句上面添加“console.log(cls)”就可知道是那个类出现问题了。
特殊情况是cls为空的时候,就不知道错误出在哪里了。这时候,就需要在return语句前添加debugger语句,在调用该方法时,在浏览器进入调试状态来查了。其实这是一个很烦人的过程,因为类的创建过程都会调用该方法,因而这个需要耐心,一直等到错误出现的时候。而且这个过程可能要重复一次才行,因为错误是在debugger后产生,你需要记录的是这个错误是在什么时候产生,这个很重要。
当知道错误是在什么时候发生了,就可以在debugger进入调试状态的时候,在浏览器的调试工具中,查看栈信息,以确定那个类调用了该方法造成的错误,从而知道错误是产生在那个类。知道了错误在那个类,就好办了,用排除法就可以很容易知道是那个地方出问题了。
以上步骤修改代码后,都要build一次再调试。
由于该错误一时很难还原,栈调试无法以图片显示,在此深表遗憾,如果有需要,可加群391747779进行咨询。
BTY:貌似在最新版的Sencha CMD中已消除了该错误。
Ext JS 6应用程序Build后出现“c is not a constructor return new c(a[0])”的处理的更多相关文章
- 将Ext JS 5应用程序导入Web项目以及实现本地化
在Ext JS 5,使用了新的脚本和样式加载方式,这对于将应用程序导入到Web项目中产生了点小麻烦.而对于本地化文件的导入,也采用了新的方式,本文将一一解答这些问题. 将Ext JS 5应用程序导入W ...
- 将Ext JS 6应用程序导入Web项目
由于Ext JS 6包含了Sencha Touch,因而在应用程序结构有了些改变,Ext JS 5的方法已经不适用于新版本了.经过研究,发现6导入Web项目要比5简单. 下面来说说导入的过程. 使用S ...
- 在Ext JS 5应用程序中如何使用路由
简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它 ...
- 【翻译】在Ext JS 5应用程序中怎样使用路由
原文:How to Use Routing in Your Ext JS 5 Apps 简单介绍 Ext JS 5是一个重要的公布版本号,它提供了很多新特性来创建丰富的.企业级的Web应用程序.MVV ...
- 【翻译】针对多种设备定制Ext JS 5应用程序
原文:Tailoring Your Ext JS 5 Application for a Multi-Device World 概述 鉴于当今设备和表单因素的扩散,要针对所有这些可能性来优化应用程序已 ...
- 【翻译】在Ext JS 5应用程序中如何使用路由
原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双 ...
- 将Ext JS 5应用程序导入Web项目中
相关资料:http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 原文地址: https://blog.csdn. ...
- 【翻译】使用Sencha Ext JS 6打造通用应用程序
原文:Using Sencha Ext JS 6 to Build Universal Apps {.aligncenter} 在Sencha和整个Ext JS团队的支持下,我很高兴能跟大家分享一下有 ...
- [转]使用Sencha Ext JS 6打造通用应用程序
原文地址:http://www.uedsc.com/using-sencha-ext-js-6-to-build-universal-apps.html 在Sencha和整个Ext JS团队的支持下, ...
随机推荐
- 找到一个牛的一逼的,超简易ssm和ssh的学习网址
http://how2j.cn 蛋疼的是,我早就用springboot了!不过,可以给公司新人看.
- Python小代码_11_生成小于 n 的裴波那契数列
def fib(n): a, b = 1, 1 while a < n: print(a, end=' ') a, b = b, a + b fib(100000) #输出结果 #1 1 2 3 ...
- js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
- FJUT第四周寒假作业之第一集,临时特工?(深度优先搜索)
原网址:http://210.34.193.66:8080/vj/Contest.jsp?cid=163#P2 第一集,临时特工? TimeLimit:1000MS MemoryLimit:128M ...
- leetcode刷题笔记231 2的幂
题目描述: 给定一个整数,写一个函数来判断它是否是2的幂. 题目分析: 判断一个整数是不是2的幂,可根据二进制来分析.2的幂如2,4,8,等有一个特点: 二进制数首位为1,其他位为0,如2为10,4为 ...
- geotrellis使用(四十)优雅的处理请求超过最大层级数据
前言 要说清楚这个题目对我来说可能都不是一件简单的事情,我简单尝试. 研究 GIS 的人应该都清楚在 GIS 中最常用的技术是瓦片技术,无论是传统的栅格瓦片还是比较新颖的矢量瓦片,一旦将数据切好瓦片就 ...
- springMVC源码分析--HandlerMethodReturnValueHandlerComposite返回值解析器集合(二)
在上一篇博客springMVC源码分析--HandlerMethodReturnValueHandler返回值解析器(一)我们介绍了返回值解析器HandlerMethodReturnValueHand ...
- sublime text package control 被墙的解决办法
似乎没有办法 只能碰运气, 时好时坏. 或者手动安装 趁着好的时候, 下载离线包 https://packagecontrol.io/Package%20Control.sublime-package ...
- 安卓高级6 玩转AppBarLayout,更酷炫的顶部栏 Toolbar
原文大神地址:http://www.jianshu.com/p/d159f0176576 上一篇文章[<CoordinateLayout的使用如此简单 >]上一篇文章<Coordin ...
- 自定义下拉刷新上拉加载View
MainActivity.java package com.heima52.pullrefresh; import java.util.ArrayList; import com.heima52.pu ...