PDA

View Full Version : CodeMirror2 and Ext JS 4.1



stevechappell
15 Feb 2013, 10:31 AM
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
17 Feb 2013, 8:33 AM
Are you using an app generated using Sencha Cmd?

stevechappell
17 Feb 2013, 5:16 PM
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
17 Feb 2013, 5:21 PM
...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>