javascript - ExtJs 异常会立即破坏页面上的所有 ExtJs 组件

Question

如果您曾经使用过 ExtJs，您可能遇到过恶意的“无法读取 null 的属性‘dom’”异常。对我来说，它通常发生在 doInsert 内部(外部跟踪中 14 个堆栈中的最后一个)(ExtJs 的代码):

doInsert: function(el, o, returnElement, pos, sibling, append) {
    //<My own comment>: hint: el === null (curiously not undefined?)
    el = el.dom || Ext.getDom(el);

    var newNode;
    ...
}

当您尝试将 ExtJs 组件(Tree、Grid、Button 等)附加到 DOM 中尚不存在的 DOM 元素时，就会发生这种情况。通常该元素在内存中，作为 AJAX 请求的一部分构建，准备好在成功时插入。

问题是，当 ExtJS 抛出异常时，它从根本上破坏了页面中的每个 ExtJs 组件。所有的网格、树、菜单、按钮都会立即被破坏。单击和悬停等事件绑定(bind)要么不执行任何操作，要么生成异常。

我目前通过首先执行 document.getElementById 检查来缓解这种情况，如果结果未定义，那么我将延迟 100 毫秒并重试。这很丑陋，但它有效。做起来也很昂贵。随着某些页面变得越来越复杂，就会有越来越多的 document.getElementById 延迟循环；并且越来越难追踪哪个模块中的哪个方法没有测试 getElementById。

一团糟

问题:有没有办法强制ExtJS优雅地抛出？要覆盖它的异常处理机制？翻转“dontBreakTheEntirePage”配置变量？

更新:

尝试去之后direct to Sencha and after a few rebuffs ，我更清楚地展示了问题(我希望):

编辑:Sencha 正在审核我对 original thread 的回复.如果您对此类故障有任何兴趣，请添加到讨论中。

1. 打开文档 ( http://docs.sencha.com/extjs/4.1.0/ )
2. 打开几个选项卡(我有 Ext、Ext.tree.Panel、Ext.menu.Menu、Ext.AbstractComponent 和 Ext.draw.Color)
3. 打开 Chrome 开发者工具并查找错误。
4. 在选项卡之间来回点击几次以进行完整性检查。选项卡按预期呈现，没有错误。
5. 现在，让我们打开页面。
6. 回到开发工具。
7. 切换到控制台。

8. 定义一个临时方法:

   var tryCatch = function (func) {
   
       try {
           func.apply(this, Array.prototype.slice.call(arguments, 1));
       } catch (ex) {
           var e = {
               type: 'js',
               message: ex.message,
               detail: 'JS Error type: ' + ex.type + '<br/>\n' + 'Stack: ' + ex.stack
           };
           console.error(e);
       }
   };
   

9. 定义一个会抛出异常的方法:

   var myExceptionFunction = function () {
       //Demo taken straight from ExtJs docs on Ext.menu.Menu
       Ext.create('Ext.menu.Menu', {
           width: 100,
           margin: '0 0 10 0',
           floating: false,
           renderTo: 'thisIdDoesNotExist', //and will break the already rendered page
           items: [{
               text: 'regular item 1'
           }, {
               text: 'regular item 2'
           }, {
               text: 'regular item 3'
           }]
       });
   };
   

10. 执行 tryCatch 包装器中的 myExceptionFunction 方法:

    tryCatch(myExceptionFunction);
    

11. 观察报告的错误:“无法读取 null 的属性‘dom’”

12. 现在开始在打开的选项卡之间来回点击。

13. 突然，页面出现了一些奇怪的行为。

14. 您开始在控制台中看到新的异常:“未捕获的类型错误:无法读取未定义的属性‘dom’”选项卡呈现，但出现在意想不到的地方。当前选择的选项卡并不总是正确更新。

现在，ExtJs 的文档站点实际上很好地处理了这个错误。大多数页面仍然以您可以应付的方式工作；但在我的场景中，我的页面残废了。

我们谈论的是已经呈现的内容——已经在 DOM 中。我无法想象有什么理由会抛出超过该点的异常来破坏已经执行的内容。

Answer 1

Christopher，很抱歉，但 Evan 在您的链接线程中对您的问题的回答都是恰当的，而且很有道理。他完全理解你的要求，而你却不理解他。进一步研究 Extjs 构建的内部机制会让您意识到，正如您描述的那样，“已经呈现”的事物与与布局引擎有关的所有其他事物紧密相关。这样做是为了显着提高渲染速度的微优化。因为它是如此紧密地联系在一起，所以当您尝试将某些东西渲染到另一个不存在的东西时，您将导致整个引擎崩溃。

这里的误解是您假设“已经呈现”的事物与“待呈现”的事物无关。在 extjs 中，这些东西是紧密耦合的，破坏一个就会破坏另一个。由于这种紧密耦合对于加快库渲染速度是必要的(相信我，他们不能让它渲染得更慢并且仍然可以在 IE8 上使用)，你遇到的“问题”是一个必要的邪恶。

如果您不能或不想花开发时间在您自己的代码逻辑中实现另一个解决方案，Evan 的示例是用一个简单的 try-catch block 围绕您的代码是最佳途径。