Javascript/ExtJS - get Codemirror Editor by textarea

Hello stackoverflow community,

i just built a Codemirror Editor into an ExtJSProject like so:

addCodeMirrorPanel: function() {
        xtype: 'textarea',
        fieldLabel: 'AIXM',
        autoScroll: true,
        name: 'aixm',
        id: 'codearea',
        width: 800,
        height: 300,
        resizable: true,
        resizeHandles: 's se e',
        listeners: {
            afterrender: function () {
                var textarea = Ext.getCmp('codearea');
                var codemirror = CodeMirror.fromTextArea(textarea.inputEl.dom,{
                    lineNumbers: true,
                    content: '',
                    matchBrackets: true,
                    autoClearEmptyLines: true,
                    extraKeys: {"Enter": "newlineAndIndentContinueComment"}



Now what i want to do is access the codemirror editor from a different Controller function and im not quite sure about how to do that. no getinstance() , geteditorbyID() or similar methods are specified in the codemirror manual and i cant seem to access it from the now hidden textfield either.


Well why are you discarding the instance after you are creating it? Perhaps you could simply store it on the widget?

this.codeMirror = CodeMirror.fromTextArea(...);

I ran into a similar issue and was originally using the answer provided by plalx. However, if you are in need of creating instances of codemirror's dynamically this can get tricky.

I used the following code and created a method on the parent component to getValue(), setValue(), and getCodeMirror()

So in use you can get the codemirror instance similar to this:

var codeMirror = Ext.ComponentQuery.query('#parentFld')[0].getCodeMirror();

Here is the component code:

    fieldLabel: 'Code Instance',
    itemId: 'parentFld',
    border: 1,
    html: '<textarea></textarea>',
    /* Overriding getValue function of the field to pull value from the codemirror text area*/
    getValue: function (value) {
        return this.getCodeMirror().getValue();
    /*Overriding setValue function of the field to put the value in the code mirror window*/
    setValue: function (value) {
    getCodeMirror: function () {
        return this.getEl().query('.CodeMirror')[0].CodeMirror;
    listeners: {
        //on render of the component convert the textarea into a codemirror.
        render: function () {
            var codeMirror = CodeMirror.fromTextArea(this.getEl().down('textarea').dom, {
                mode: { 
                  name: "text/x-sql", globalVars: true 
                //theme: theme,
                lineNumbers: true,
                readOnly: false,
                extraKeys: {"Ctrl-Space":"autocomplete"}
            codeMirror.setSize(700, 370);

Need Your Help

jQuery ajax not work

javascript jquery ajax

This is my function to call ajax:

How to Rename the Default Package of FBReader for Android?


I am developing an android ebook reader using FBReader and got stucked while renaming its package. After renaming the package, the app is not working. Can anybody please suggest the steps to rename...