Question

Hello stackoverflow社区，

我刚刚在ExtJSProject中构建了一个Codemirror编辑器，如下所示：

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

        }
    }));

}

现在我想要做的是从不同的Controller函数访问codemirror编辑器我不太确定如何做到这一点。没有getinstance（），geteditorbyID（）或类似的方法在codemirror手册中指定，我似乎无法从现在隐藏的文本字段中访问它。

Answer 1

那么为什么在创建实例后丢弃该实例？也许你可以简单地将它存储在小部件上？

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

Answer 2

我遇到了类似的问题，最初使用的是plalx提供的答案。但是，如果您需要动态创建codemirror的实例，这可能会变得棘手。

我使用以下代码并在父组件上创建了getValue()，setValue()和getCodeMirror()

的方法

因此，在使用中，您可以获得与此类似的codemirror实例：

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

以下是组件代码：

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

Javascript / ExtJS - 通过textarea获取Codemirror编辑器

2 个答案: