Bind codemirror extjs 6

Question

Code mirror is not bind in extjs 6. I already tried to subcribe the get and set methods, only the set works, when the component is opened the value is set, but when it changes the value of the codemirror, it does not bind with the value

My component:

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"]
        });
    }
}

});

Use the component (Default bind is value on 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)
}