绑定codemirror extjs 6

Question

代码镜像在 extjs 6 中未绑定。我已经尝试订阅 get 和 set 方法，只有 set 有效，当组件打开时设置值，但是当它更改 codemirror 的值时，它不与值绑定

我的组件：

Ext.define('Ext.form.field.CodeMirror', {
extend: 'Ext.form.field.TextArea',

alias: 'widget.codemirror',

getValue: function () {

    var me = this;

    if (me.codeEditor) {
        return me.codeEditor.getValue();
    }
},

setValue: function (value) {

    this.codeEditor.setValue(value);
},

listeners: {
    afterrender: function (textarea) {

        var me = this;

        me.codeEditor = CodeMirror.fromTextArea(textarea.inputEl.dom, {
            mode: "xml",
            htmlMode: true,
            theme: "default",
            lineNumbers: true,
            lineWrapping: true,
            matchTags: {
                bothTags: true
            },
            autoCloseTags: true,
            extraKeys: {
                "F11": function (cm) {
                    cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                },
                "Esc": function (cm) {
                    if (cm.getOption("fullScreen")) {
                        cm.setOption("fullScreen", false);
                    }
                }
            },
            foldGutter: {
                rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent)
            },
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        });
    }
}

});

使用组件（默认绑定是 Extjs 上的值）：

xtype: 'codemirror',
name: 'xml',
bind: '{model.arquivoNfceWrapper.xml}',

Answer 1

listeners: {
    afterrender: function (textarea) {

        var me = this;

        me.codeEditor = CodeMirror.fromTextArea(textarea.inputEl.dom, {
            mode: "xml",
            htmlMode: true,
            theme: "default",
            lineNumbers: true,
            lineWrapping: true,
            matchTags: {
                bothTags: true
            },
            autoCloseTags: true,
            extraKeys: {
                "F11": function (cm) {
                    cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                },
                "Esc": function (cm) {
                    if (cm.getOption("fullScreen")) {
                        cm.setOption("fullScreen", false);
                    }
                }
            },
            foldGutter: {
                rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent)
            },
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        });

        me.codeEditor.on('change', function (cMirror) {

            me.updateBindValue(cMirror.getValue());
        });

        me.codeEditor.setValue(me.getBindValue());
    }
},

getBindValue: function () {

    return this.bind.value.getValue();
},

updateBindValue: function (value) {
    this.bind.value.setValue(value)
}

绑定codemirror extjs 6

Bind codemirror extjs 6

extjs

codemirror

extjs6

extjs6-classic