The code in the end of this post throws an error (visible in Firebug):
TypeError: ownerContext.overflowContext is null
return ownerContext.overflowXStyle || (ownerContext.overflowXStyle = this.owner....
ext-all-debug.js (row 75928, column 8)
Basically what the code does in words is:
- create two Ext.panel.Panel (panel_1, panel_2) and one Ext.tab.Panel (tab_panel)
- add panel_1 and panel_2 to tab_panel items
- add tab_panel to Ext.Viewport (vp)
- create a CodeMirror object (code_mirror_editor) using a callback-function (code_mirror_callback_function) , which replaces the standart-ExtJS-content of panel_1 with the CodeMirror object
I am using ExtJs 5.1 with 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>
Now here comes the problem:
You can switch for approximately 30 seconds between the tabs and everything works fine (The time-interval may vary). After some time-interval though the aforementioned TypeError occurs, after switching again to panel_1.
What can i do to circumvent this error?
I have already tried the following:
instead of using a callback-function, i call
var code_mirror_editor = CodeMirror(panel_1.body, { lineWrapping: true, lineNumbers: true, value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>" });and inpanel_1setautoScroll: trueResult: The error is gone, but i have a huge unfilled div which leaves a big blank space inside panel_1. So the result is no solution.Run my code in Sencha-Fiddle:
Result: The error does also occur on Sencha-Fiddle.Observation: The Error solely appears in ExtJs 5.1. In ExtJs 5.0 the error does not happen.