Javascript/ExtJS - get Codemirror Editor by textarea

Question

Hello stackoverflow community,

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

addCodeMirrorPanel: function() {
   this.getAixmFormarea().add(Ext.widget({
        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,
                    electricChars: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.

Answer 1

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(...);

Answer 2

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) {
        this.getCodeMirror().setValue(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);
        }
    }
}