Ext.ux.panel.CodeMirror

[prophet]

Nice additions, Stju!
...Dont't getValue and setValue already exist though?

[saprot]

it works with the latest CodeMirror git snapshot

[talha06]

Had today time to work around this component..
so here are few additional methods:

    getValue: function() {
        return this.codeMirrorEditor.getCode();
    },

    setValue: function(text) {
        this.codeMirrorEditor.setCode(text);
    },

    setValueAtCursor: function(text) {
        var cursorPosition = this.codeMirrorEditor.cursorPosition();
        var handleForCursorLine = this.codeMirrorEditor.cursorLine();
        this.codeMirrorEditor.insertIntoLine(handleForCursorLine, cursorPosition.character, text);
    }

It doesn't work.. Gives an error like this : "this.editor is undefined".. Can someone help me? (I mean setValue and getValue functions)

[Stju]

It works, it has been tested with different CodeMirror versions!
As You didn't post the line and file where that error appears it's almost impossible to help, although it looks like You have not included codemirror file before extjs code..

[talha06]

It works, it has been tested with different CodeMirror versions!
As You didn't post the line and file where that error appears it's almost impossible to help, although it looks like You have not included codemirror file before extjs code..

Error happened at this line:

setValue: function(text) {
    this.codeMirrorEditor.setCode(text);
}

And here's the list of my includes:

  <script src="./script/jsBeautify/beautify.js"></script>
	<script src="./script/lib/ext/ux/codemirror/CodeMirror-0.63/js/codemirror.js"></script>
	<script src="./script/lib/ext/ux/codemirror/Ext.ux.panel.CodeMirror.js"></script>
	<script src="./script/lib/ext/ux/codemirror/jslint.js"></script>
	
	<!-- Source File -->
	<script type="text/javascript" src="./script/homepage.js"></script>

[Stju]

1. You are using VERY old version of editor.. I strongly recommend using latest one, since the some latest versions fixes numerous Webkit browser related issues!
2.Editor must be rendered before You can set the its value!
Excerpt from my code, maybe it will help You:

this.snipCodePanel = new Ext.ux.panel.CodeMirror({
        height:240,
        title:'Code view',
        autoScroll:true,
        bodyStyle:'background-color:white',
        //codemirror stuff
        listeners: {
            render: function(){
                this.doLayout();
            }
        },
        //sourceCode: '',
        parser: 'php',
        codeMirror:{
            lineNumbers:false
        },
...
    });

[talha06]

OK, thanks a lot for your helps Stju. It works now, I thought the attached file is recent; but the recent version is 0.91. (Release date : 11/11/2010)

[Stju]

Welcome!
Nice to hear!

[Zerogiven]

hi,

first, thanks for your panel it works a bit better for me than the other codemirror ux. I also made two functions for hide/show codemirror and hide/show the textarea with the same value.

Maybe someone else can need it too

codeMirrorHidden: false, //just a public config
hideCodeMirror: function () {
    var iframeEl = Ext.select('div#'+this.id + ' > div > div > .CodeMirror-wrapping', true);
    var textareaEl = Ext.select('div#'+this.id + ' > div > div > textarea', true);

    this.items.itemAt(0).setValue( this.getValue() );

    iframeEl.setVisible(false);
    textareaEl.setVisible(true);
    textareaEl.removeClass('x-hide-display');

    this.items.itemAt(0).setWidth("100%");
    this.items.itemAt(0).setHeight("100%");

    this.codeMirrorHidden = true;
},
showCodeMirror: function () {
    var iframeEl = Ext.select('div#'+this.id + ' > div > div > .CodeMirror-wrapping', true);
    var textareaEl = Ext.select('div#'+this.id + ' > div > div >textarea', true);

    this.setValue( this.items.itemAt(0).getValue() );

    textareaEl.addClass('x-hide-display');
    textareaEl.setVisible(false);
    iframeEl.setVisible(true);

    this.codeMirrorHidden = false;
} 

At least i inserted the following code insert the triggerCodeEditor function right after initializing codemirror (new CodeMirror...):

var iframeEl = Ext.select('div#'+this.id + ' > div > div > .CodeMirror-wrapping', true);
var textareaEl = Ext.select('div#'+this.id + ' > div > div > textarea', true);

textareaEl.setVisibilityMode(Ext.Element.DISPLAY);
iframeEl.setVisibilityMode(Ext.Element.DISPLAY);

if (this.codeMirrorHidden) this.hideCodeMirror(); 

greetz
Chris

[bugu1986]

nice work