ExtJs 5.1 - Ext.Panel 具有 XML- 突出显示、编辑、行号功能

Question

基本上我需要一个 Ext.Panel，其中包含 XML-Editor 以及 syntax-highlighting、行号和编辑。

我在网上搜索了 Javascript API CodeMirror.

我已经实现了一些东西，但是 CodeMirror-object-Textfield 的对齐 没有调整 本身到 Top/left 的 Ext.Panel 也没有看到行号：

<!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,
                    id: 'panel_1_id',
                    title: 'panel_1',
                    padding: '10 10 10 10',
                    margin: '10 10 10 10',
                    autoScroll: true
                });

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

            var myCodeMirror = CodeMirror(panel_1.body, {
              value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
            });
        });
      </script>
    </head>
     <body>
     </body>
</html>

于是出现以下问题：

1.) 我想过 extending Ext.Component 并以某种方式将 CodeMirror 对象打包到其中？ 这可能吗？

2.) 是否可以调整我上面的小代码示例以正确对齐它？

Answer 1

这可以通过对您的代码进行一些细微调整来解决。

这里的关键点是 CodeMirror 的行为将根据您传递给 CodeMirror 的第一个参数的类型而有所不同构造函数。传递 HTML 元素（如您的示例所示）将导致 HTML DOM 函数 appendChild() 被调用。这就是为什么在你的新元素之前有一个大 space，因为它被附加在面板的主体之后。

如果您将函数（作为回调）传递给 CodeMirror 构造函数，那么您将返回 HTML 元素 即 CodeMirror。以这种方式构造元素使您能够用新的 HTML 元素替换面板的 body 元素（而不是附加）。

这可以通过创建一个简单的函数来实现。您需要的代码更改如下....

创建一个传递给 CodeMirror 构造函数的函数

var codeMirrorCallbackFunction = function(codeMirrorEl) { 
    var panelDom = panel_1.el.dom;        
    // the node at index 1 is the body (index 0 is panel header)
    panelDom.replaceChild(codeMirrorEl, panelDom.childNodes[1]);
};

创建将函数作为第一个参数传递的 CodeMirror 对象

var myCodeMirror = CodeMirror(codeMirrorCallbackFunction, {
    value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});

更新面板的填充

// without this change the panel header and codemirror html overlap
padding: '25 10 10 10'

Answer 2

你做得不错，只需要加一个属性赞

var myCodeMirror = CodeMirror(panel.body, {
                           value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>",
                           lineNumbers: true
                        });

ExtJs 5.1 - Ext.Panel 具有 XML- 突出显示、编辑、行号功能

ExtJs 5.1 - Ext.Panel with XML-Highlighting, editing, linenumbering capabilities

html

javascript

extjs

codemirror

于是出现以下问题：