1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    3
    Vote Rating
    0
    Answers
    1
    stevechappell is on a distinguished road

      0  

    Default Answered: CodeMirror2 and Ext JS 4.1

    Answered: CodeMirror2 and Ext JS 4.1


    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?

  2. 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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    871
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Are you using an app generated using Sencha Cmd?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    3
    Vote Rating
    0
    Answers
    1
    stevechappell is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha User
    Join Date
    Feb 2013
    Posts
    3
    Vote Rating
    0
    Answers
    1
    stevechappell is on a distinguished road

      0  

    Default


    ...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)
    Code:
    < 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>

Thread Participants: 1