Question

此帖子末尾的代码会引发错误（在 Firebug 中可见）：

TypeError: ownerContext.overflowContext is null
return ownerContext.overflowXStyle || (ownerContext.overflowXStyle = this.owner....
ext-all-debug.js (row 75928, column 8)

基本上代码在文字中的作用是：

创建两个Ext.panel.Panel（ panel_1 ， panel_2 ）和一个Ext.tab.Panel（ tab_panel ）
将 panel_1 和 panel_2 添加到 tab_panel 项目
将 tab_panel 添加到 Ext.Viewport （ vp ）
使用回调函数（ code_mirror_callback_function ）创建CodeMirror对象（ code_mirror_editor ），替换标准版ExtJS - 带有CodeMirror对象的panel_1的内容

我正在ExtJs 5.1使用CodeMirror 5.3：

    <!DOCTYPE html>
    <html>
    <head>
    <!-- ext imports -->
    <script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
    <link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

    <!-- codemirror imports -->
    <script type="text/javascript" language="javascript" src="/CodeMirror-master/lib/codemirror.js"></script>
    <link rel="stylesheet" href="/CodeMirror-master/lib/codemirror.css">
    <script type="text/javascript" src="/CodeMirror-master/mode/xml/xml.js"></script>

    <script type ="text/javascript">
        Ext.onReady(function(){
            var    panel_1    = Ext.create('Ext.panel.Panel', {
                    frame:true,
                    title: 'panel_1'
            });

            var panel_2 = Ext.create('Ext.panel.Panel', {
                frame:true,
                title: 'panel_2',
                html: "some-html"
            });

            var tab_panel = Ext.create('Ext.tab.Panel', {
                frame:true,
                title: 'tab_panel',
                items:[panel_1,panel_2]
            });

            var vp = new Ext.Viewport({
                layout: 'fit',
                items: [tab_panel],
                renderTo: Ext.getBody()
            });

            var code_mirror_callback_function = function(codeMirrorEl) {
                var panel_1_dom = panel_1.el.dom;
                panel_1_dom.replaceChild(codeMirrorEl, panel_1_dom.childNodes[0]);
            };

            var code_mirror_editor = CodeMirror(code_mirror_callback_function, {
                lineWrapping: true,
                lineNumbers: true,
                value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
            });
            code_mirror_editor.setSize(500,250);
            code_mirror_editor.refresh();

        });
    </script>
</head>
<body>
</body>

现在出现了问题：
您可以在选项卡之间切换大约30秒，一切正常（时间间隔可能会有所不同）。在发生上述 TypeError 之后的一段时间间隔后，再次切换到 panel_1 。

如何绕过此错误？

我已经尝试过以下几种：

而不是使用回调函数，我称之为 var code_mirror_editor = CodeMirror(panel_1.body, { lineWrapping: true, lineNumbers: true, value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>" });和panel_1设置autoScroll: true 结果：错误消失了，但我有一个巨大的未填充div，在 panel_1 中留下了很大的空白。所以结果是没有解决方案。
在Sencha-Fiddle中运行我的代码：
结果：Sencha-Fiddle上的错误也会发生。
观察：错误仅出现在ExtJs 5.1中。在ExtJs 5.0中，错误不会发生。

包含CodeMirror的Ext.snel.Panel的ExtJs5 -Ext.tab.Panel - TypeError：ownerContext.overflowContext为null

0 个答案: