Bind codemirror extjs 6 - extjs

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)
}