CodeMirror editor within a panel

Question

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.

Answer 1

You should never edit the index file. Instead add the files you want to include to the corresponding section in app.json.

For JavaScript:

/**
 * List of all JavaScript assets in the right execution order.
 *
 * Each item is an object with the following format:
 *
 *      {
 *          // Path to file. If the file is local this must be a relative path from
 *          // this app.json file.
 *          //
 *          "path": "path/to/script.js",   // REQUIRED
 *
 *          // Set to true on one file to indicate that it should become the container
 *          // for the concatenated classes.
 *          //
 *          "bundle": false,    // OPTIONAL
 *
 *          // Set to true to include this file in the concatenated classes.
 *          //
 *          "includeInBundle": false,  // OPTIONAL
 *
 *          // Specify as true if this file is remote and should not be copied into the
 *          // build folder. Defaults to false for a local file which will be copied.
 *          //
 *          "remote": false,    // OPTIONAL
 *
 *          // If not specified, this file will only be loaded once, and cached inside
 *          // localStorage until this value is changed. You can specify:
 *          //
 *          //   - "delta" to enable over-the-air delta update for this file
 *          //   - "full" means full update will be made when this file changes
 *          //
 *          "update": "",        // OPTIONAL
 *
 *          // A value of true indicates that is a development mode only dependency.
 *          // These files will not be copied into the build directory or referenced
 *          // in the generate app.json manifest for the micro loader.
 *          //
 *          "bootstrap": false   // OPTIONAL
 *      }
 *
 */
"js": [
    {
        "path": "${framework.dir}/build/ext-all-rtl-debug.js"
    },
    {
        "path": "app.js",
        "bundle": true
    }
],

and for CSS:

/**
 * List of all CSS assets in the right inclusion order.
 *
 * Each item is an object with the following format:
 *
 *      {
 *          // Path to file. If the file is local this must be a relative path from
 *          // this app.json file.
 *          //
 *          "path": "path/to/stylesheet.css",   // REQUIRED
 *
 *          // Specify as true if this file is remote and should not be copied into the
 *          // build folder. Defaults to false for a local file which will be copied.
 *          //
 *          "remote": false,    // OPTIONAL
 *
 *          // If not specified, this file will only be loaded once, and cached inside
 *          // localStorage until this value is changed. You can specify:
 *          //
 *          //   - "delta" to enable over-the-air delta update for this file
 *          //   - "full" means full update will be made when this file changes
 *          //
 *          "update": ""      // OPTIONAL
 *      }
 */
"css": [
    {
        "path": "bootstrap.css",
        "bootstrap": true
    }
],

If you put the files you want to include above the 'default files' like app.js you have always access to those namespaces, they are included in your production builds, they are cacheable and you can use them in your update process..

Answer 2

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