Bind codemirror extjs 6

Question

Le miroir de code n'est pas lié dans extjs 6. J'ai déjà essayé de souscrire les méthodes get et set, seul le jeu fonctionne, lorsque le composant est ouvert, la valeur est définie, mais quand il change la valeur de le CodeMirror, il ne se lie pas à la valeur

Mon élément:

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

});

Utilisation du composant (liaison par défaut est la valeur sur 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) 
}