CodeMirror2 and Ext JS 4.1

[stevechappell]

Ok - EXTJS Newbie alert....

I am trying to integrate Code Mirror2 to replace a textarea. I don't need another link to codeMirror2 sample, I got the code - I have the "plugin" (not sure what that term is supposed to imply), my issues are simple;

1) Where do I put the javascript files that come with CodeMirror2
2) Where do I put the plug-in code

Anyone done this?

[mitchellsimoens]

Are you using an app generated using Sencha Cmd?

[stevechappell]

So the problem with CodeMirror2, is that it to dang simple to use. I was makeing much harder than it neededed to be. For others wanting to use CodeMirror, with EXT JS, here is all I had to do;

var textarea1 = Ext.getCmp('DBxRESPSCRIPT');
myCodeMirror1 = CodeMirror.fromTextArea(textarea1.el.dom,{
lineNumbers: true,
content: textarea1.getRawValue(),
matchBrackets: true,
value: textarea1.value,
electricChars:true,
autoClearEmptyLines: true,
extraKeys: {"Enter": "newlineAndIndentContinueComment"}
});

The key was to get the TextArea Element Dom, hightlighted above, once I got over that hurdle, it was a snap.

[stevechappell]

...Sorry - I also need to to include all the proper resources from the Codemirror package, shown below, but also I mis-spoke, I am using CodeMirror 3.2 (not 2).

(Here is a dump of my app.html)

<
head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>CBAdmin</title>
<scriptsrc="../resources/extjs/ext-all.js"></script>
<linkrel="stylesheet"href="../resources/extjs/resources/css/ext-all.css">
<scriptsrc="../resources/extjs/CodeMirror/lib/codemirror.js"></script>
<linkrel="stylesheet"href="../resources/extjs/CodeMirror/lib/codemirror.css">
<scriptsrc="../resources/cafe/AppConfigs.js"></script>
<scriptsrc="../resources/cafe/CafeFieldLibraries.js"></script>
<scriptsrc="../resources/cafe/CafeToolBarControl.js"></script>
<scriptsrc="../resources/cafe/CafeEngine.js"></script>
<linkrel="stylesheet"href="../resources/cafe/CafeEngine.css">
<scriptsrc="../resources/extjs/CodeMirror/mode/javascript/javascript.js"></script>
<scriptsrc="../resources/extjs/CodeMirror/lib/util/formatting.js"></script>
<scriptsrc="../resources/extjs/CodeMirror/addon/hint/javascript-hint.js"></script>
<scriptsrc="../resources/extjs/CodeMirror/addon/dialog/dialog.js"></script>
<linkrel="stylesheet"href="../resources/extjs/CodeMirror/addon/dialog/dialog.css">
<scriptsrc="../resources/extjs/CodeMirror/mode/htmlmixed/htmlmixed.js"></script>
<scriptsrc="../resources/extjs/CodeMirror/addon/search/match-highlighter.js"></script>
<scriptsrc="../resources/extjs/CodeMirror/addon/search/search.js"></script>
<scriptsrc="../resources/extjs/CodeMirror/addon/search/searchcursor.js"></script>
<linkrel="stylesheet"href="../resources/extjs/CodeMirror/theme/eclipse.css">
<linkrel="stylesheet"href="../resources/extjs/CodeMirror/theme/ambiance.css">
<linkrel="stylesheet"href="../resources/extjs/CodeMirror/theme/solarized.css">
<scriptsrc="../resources/extjs/CodeMirror/addon/edit/matchbrackets.js"></script>
<scriptsrc="../resources/extjs/CodeMirror/addon/hint/simple-hint.js"></script>
<linkrel="stylesheet"href="../resources/extjs/CodeMirror/addon/hint/simple-hint.css">
<scriptsrc="./General.js"id="general"></script>
<scripttype="text/javascript"src="app.js?_dc=1361134341930"></script>
</head>