概述

在对Ext JS 6的应用程序打包后,时不时会出现以下错误:

由于是压缩后出现的错误,要进行调试也无从下手,因而这个错误会令新手手足无措,不知道是怎么回事。

错误原因

造成该错误的主要原因是要创建的类在打包时没有包含在包内,又或者是类名错误造成的。我遇到的一个比较典型的错误就是在requires中使用了Ext.MessageBox而不是Ext.window.MessageBox,就会出现该错误。

解决办法

虽然知道该错误是由于类名造成的,但苦于无法知道是那个文件中的requires出现的问题,因而要解决这个问题也很棘手,不过主要有足够耐心,还是能解决的。

该错误出现的地方是在应用程序ext\packages\core\src\class目录下的ClassManager.js文件中的getInstantiator方法内,代码如下:

  1. getInstantiator: function(length) {
  2. var instantiators = this.instantiators,
  3. instantiator,
  4. i,
  5. args;
  6. instantiator = instantiators[length];
  7. if (!instantiator) {
  8. i = length;
  9. args = [];
  10. for (i = 0; i < length; i++) {
  11. args.push('a[' + i + ']');
  12. }
  13. instantiator = instantiators[length] = new Function('c', 'a', 'return new c(' + args.join(',') + ')');
  14. //<debug>
  15. instantiator.name = "Ext.create" + length;
  16. //</debug>
  17. }
  18. return instantiator;
  19. },

错误中的代码就是由“instantiator=”这句代码(文件的895行)自动生成的。这段代码的主要作用是创建一个新的类实例并返回该实例,而当该类不存在或类名错误的时候,因为创建不了类的实例,就会出现错误。

出现问题的地方已经找到,但要解决问题,不能在这里,因为在该函数内要查找是那个类出现错误,也很困难,因为调用该类的时候传递给该类的可能是一个空的类名,因而,需要在调用该方法时去查。

通过在ClassManager.js文件中搜索getInstantiator,会发现在create方法内调用了该方法,代码如下:

  1. create: function () {
  2. var name = arguments[0],
  3. nameType = typeof name,
  4. args = arraySlice.call(arguments, 1),
  5. cls;
  6. if (nameType === 'function') {
  7. cls = name;
  8. } else {
  9. if (nameType !== 'string' && args.length === 0) {
  10. args = [name];
  11. if (!(name = name.xclass)) {
  12. name = args[0].xtype;
  13. if (name) {
  14. name = 'widget.' + name;
  15. }
  16. }
  17. }
  18. //<debug>
  19. if (typeof name !== 'string' || name.length < 1) {
  20. throw new Error("[Ext.create] Invalid class name or alias '" + name +
  21. "' specified, must be a non-empty string");
  22. }
  23. //</debug>
  24. name = Manager.resolveName(name);
  25. cls = Manager.get(name);
  26. }
  27. // Still not existing at this point, try to load it via synchronous mode as the last resort
  28. if (!cls) {
  29. //<debug>
  30. //<if nonBrowser>
  31. !isNonBrowser &&
  32. //</if>
  33. Ext.log.warn("[Ext.Loader] Synchronously loading '" + name + "'; consider adding " +
  34. "Ext.require('" + name + "') above Ext.onReady");
  35. //</debug>
  36. Ext.syncRequire(name);
  37. cls = Manager.get(name);
  38. }
  39. //<debug>
  40. if (!cls) {
  41. throw new Error("[Ext.create] Unrecognized class name / alias: " + name);
  42. }
  43. if (typeof cls !== 'function') {
  44. throw new Error("[Ext.create] Singleton '" + name + "' cannot be instantiated.");
  45. }
  46. //</debug>
  47. return Manager.getInstantiator(args.length)(cls, args);
  48. },

注意最后一句,可以看到调用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])”的处理的更多相关文章

  1. 将Ext JS 5应用程序导入Web项目以及实现本地化

    在Ext JS 5,使用了新的脚本和样式加载方式,这对于将应用程序导入到Web项目中产生了点小麻烦.而对于本地化文件的导入,也采用了新的方式,本文将一一解答这些问题. 将Ext JS 5应用程序导入W ...

  2. 将Ext JS 6应用程序导入Web项目

    由于Ext JS 6包含了Sencha Touch,因而在应用程序结构有了些改变,Ext JS 5的方法已经不适用于新版本了.经过研究,发现6导入Web项目要比5简单. 下面来说说导入的过程. 使用S ...

  3. 在Ext JS 5应用程序中如何使用路由

    简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它 ...

  4. 【翻译】在Ext JS 5应用程序中怎样使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简单介绍 Ext JS 5是一个重要的公布版本号,它提供了很多新特性来创建丰富的.企业级的Web应用程序.MVV ...

  5. 【翻译】针对多种设备定制Ext JS 5应用程序

    原文:Tailoring Your Ext JS 5 Application for a Multi-Device World 概述 鉴于当今设备和表单因素的扩散,要针对所有这些可能性来优化应用程序已 ...

  6. 【翻译】在Ext JS 5应用程序中如何使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双 ...

  7. 将Ext JS 5应用程序导入Web项目中

    相关资料:http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 原文地址: https://blog.csdn. ...

  8. 【翻译】使用Sencha Ext JS 6打造通用应用程序

    原文:Using Sencha Ext JS 6 to Build Universal Apps {.aligncenter} 在Sencha和整个Ext JS团队的支持下,我很高兴能跟大家分享一下有 ...

  9. [转]使用Sencha Ext JS 6打造通用应用程序

    原文地址:http://www.uedsc.com/using-sencha-ext-js-6-to-build-universal-apps.html 在Sencha和整个Ext JS团队的支持下, ...

随机推荐

  1. 关于 "java中常量定义在interface中好还是定义在class中好" 的一些思考

    原文链接 http://blog.csdn.net/voo00oov/article/details/50433672 java中interface中定义变量都是"public static ...

  2. css3部分整理

    1.css弹性盒子属性 父级元素属性的设置 #father{ width: 800px; height: 300px; background-color: darkgray; /*定义父级元素为弹性元 ...

  3. 前端开发利器VSCode

    最近找到一款非常好用的开发利器,VSCode.一直认为微软做的东西都很一般,这个软件让我刮目相看了. 之前使用webstorm卡的不行,换了这个非常好用. 用着还不错,这里记录下一些使用的心得. VS ...

  4. 整理spring定时器corn表达式

    1.结构 corn从左到右(用空格隔开):秒 分 小时 月份中的日期 月份 星期中的日期 年份 2.各字段的含义   字段 允许值 允许的特殊字符 秒 0~59 - * / 分 0~59 - * / ...

  5. 55. Jump Game(中等)

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  6. 网站用户身份识别俩大招之cookie

    导航: 原理介绍 代码实现 过程分析 追踪Cookie 原理介绍 众所周知,http协议是无状态的协议,简单理解是用户的前一步操作和后一步操作之间没有关系,互相不知道,不干扰.而在很多场景下,浏览网页 ...

  7. 条件语句,while循环语句:完整的温度转换程序

    while True: a = int(input('摄氏温度换为华氏温度请按 1\n华氏温度转为摄氏温度请按 2\n退出请按 3\n')) if a==1: c = float(input('请输入 ...

  8. .net环境下跨进程、高频率读写数据

    一.需求背景 1.最近项目要求高频次地读写数据,数据量也不是很大,多表总共加起来在百万条上下. 单表最大的也在25万左右,历史数据表因为不涉及所以不用考虑, 难点在于这个规模的热点数据,变化非常频繁. ...

  9. 从输入url到页面返回到底发生了什么

    1. 前言 Google应该是开发者平日里用得最多的网站之一,今早笔者在浏览器地址栏里键入www.google.com的时候,突然想了解下这背后的网络通信过程究竟是怎么样的.毕竟自己也算是一名Web开 ...

  10. jboss规则引擎KIE Drools 6.3.0 Final 教程(1)

    前言 目前世面上中文的KIE DROOLS Workbench(JBOSS BRMS)的教程几乎没有,有的也只有灵灵碎碎的使用机器来翻译的(翻的不知所云)或者是基于老版本的JBOSS Guvnor即5 ...