Search code examples
javascriptextjsextjs5codemirror

CodeMirror editor within a panel

I am building a small extjs 5.1 app for personal use, designed to save examples of functions / methods used in my extjs apps.

The most relevant part, has a grid with a list of functions, and a panel with a textarea that displays the contents of records (scripts).

This works.

Now I'm trying to replace the textarea field by CodeMirror editor for optimal scripts viewing and have syntax higlighter.

I downloaded CodeMirror and put it in one the folder of my app with the name CodeMirror.

In my app index file was added:

<link rel = "stylesheet" href = "CodeMirror / lib / codemirror.css">
<script src = "CodeMirror / lib / codemirror.js"> </ script>

However, I am not able to access thes files codemirror.css and codemirror.js or add the editor to the panel, for example with

var editor = CodeMirror.fromTextArea (textarea, {
   lineNumbers: true
});

I would appreciate some guidance on this issue.

Solution

  • I support what Tarabass has advised about including library files. But if you face issue in converting ExtJS textarea component to CodeMirror, then please refer following code: 

    xtype: 'textarea',
listeners: {
    afterrender:function(textarea){

       var textAreaElement = textarea.getEl( ).query('textarea')[0];
       var editableCodeMirror = CodeMirror.fromTextArea(textAreaElement, {
              mode: "javascript",
              theme: "default",
              lineNumbers: true
        });

        editableCodeMirror.getDoc().setValue("console.log('Hello CodeMirror')");
    } 
}

    I have created a fiddle for you; https://fiddle.sencha.com/#fiddle/te1