Bind codemirror extjs 6

Question

Code Spiegel ist nicht bind in extjs 6. Ich habe bereits versucht, die Get und Set-Methoden zu subskribieren, nur die Menge funktioniert, wenn die Komponente geöffnet wird, wird der Wert festgelegt, aber wenn es den Wert ändert die Codemirror, ist es nicht mit dem Wert binden

Meine Komponente:

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

});

Mit der Komponente (Standard bind ist Wert auf 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) 
}