1. #31
    Sencha User
    Join Date
    Sep 2009
    Location
    Germany
    Posts
    34
    Vote Rating
    0
    SnakeMedia is on a distinguished road

      0  

    Wink


    Thanks for updated version ^^! I like this. Did you code with Preview like HTML Design or Source ? WTF You are faster than my question ^^ :P http://codemirror.net/demo/preview.html

    Thanks Keep working! Live long!
    I am deaf.
    SnakeMedia Inc:
    Ext Demo Browser: http://sm-extjs.zxq.net/facebook/extdemobrowser/
    Ext Book - coming soon!
    Ext Twitter - coming soon!
    and Ext nice applications - coming soon....

  2. #32
    Sencha User
    Join Date
    Mar 2010
    Posts
    25
    Vote Rating
    0
    mshepherd is on a distinguished road

      0  

    Default problem with scroll bars

    problem with scroll bars


    when you have text the overflows horizontally and you click on the scroll bar it jumps to the far right and selects text in the code mirror object when you let go of scrolling and move the mouse up. Any ideas how to fix this?

  3. #33
    Sencha User bkraut's Avatar
    Join Date
    Nov 2007
    Location
    Maribor, Slovenia
    Posts
    402
    Vote Rating
    1
    bkraut is on a distinguished road

      0  

    Default


    Hi,
    I'm having a lot of problems with height of the CodeMirror component. No matter what I do I can not achieve that the component fills the whole Panel.

    Here is my code:

    HTML Code:
    var codeMirrorPanel = new Ext.ux.panel.CodeMirror({
    		id: 'CodeMirrorEditor',
    		sourceCode: '/* Write config here */',
    		layout: 'fit', 
    		parser: 'js', 
    		border: false, 
        	onSave: function() {
        		var configField = Ext.getCmp("config");
        		var code = this.codeMirrorEditor.getCode();
        		configField.setValue(code);
            },
            codeMirror: { height: "100%", width: '100%' }
        });
    height: "100%" doesn't work. How can I achieve that the component will fill the whole panel?

  4. #34
    Sencha User
    Join Date
    Oct 2007
    Posts
    8
    Vote Rating
    -1
    qulys is on a distinguished road

      0  

    Default updates

    updates


    Hi,

    I haven't been much around lately, but here are som updates(CodeMirror 2.32):

    First Ext.ux.form.CodeMirror form field:

    PHP Code:
    Ext.namespace('Ext.ux.form');

    Ext.ux.form.CodeMirror Ext.extend(Ext.form.TextArea, {
        
        
    version'1.1.0',
        
    versionDate'30.07.2012',
        
    language'mixed',
        
        
    initComponent: function() {
            
            
    Ext.ux.form.CodeMirror.superclass.initComponent.apply(thisarguments);
            
    this.addEvents('initialize');
            
        },
        
        
    triggerCodeEditor: function(){
            
            var 
                
    mode
                
    hlLine,
                
    foldFunc CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder), 
                
    me this;
                
            switch (
    me.language.toLowerCase()) {
                case 
    'css':
                    
    mode "text/css";
                    break;
                    
                case 
    'js':
                    
    mode "text/javascript";
                    break;
                    
                case 
    'php':
                    
    mode "text/x-php";
                    break;
                    
                case 
    'mixed':
                    
    mode "application/x-httpd-php";
                    
    foldFunc CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
                    break;
                
                default:
                    
    mode "application/x-httpd-php";
                    
    foldFunc CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
                    break;
            }
            
            
    me.codeEditor CodeMirror.fromTextArea(document.getElementById(me.id), {
                
    lineNumberstrue,
                
    theme'cobalt',
                
    modemode,
                
    tabSize4,
                
    indentUnit4,
                
    onCursorActivity: function() {
                    
    me.codeEditor.matchHighlight("CodeMirror-matchhighlight");
                    
    me.codeEditor.setLineClass(hlLinenullnull);
                    
    hlLine me.codeEditor.setLineClass(me.codeEditor.getCursor().linenull"xcme-activeline");
                },
                
    onChange: function(){
                    
    me.setRawValue(me.codeEditor.getValue());
                },
                
    onGutterClickfoldFunc,
                
    extraKeys: {"Ctrl-Q": function(cm){foldFunc(cmcm.getCursor().line);}}
            });
            
            
    hlLine me.codeEditor.setLineClass(0"xcme-activeline");
            
            
    me.on({
                
    resize: function(tawidthheight) {
                    
    width -= 35;
                    
    me.codeEditor.setSize(widthheight);
                }
            });
            
        },
        
        
    setValue: function(v) {
            
            if(
    this.rendered){
                
    this.el.dom.value = (Ext.isEmpty(v) ? '' v);
                
    this.validate();
                if (
    Ext.isDefined(this.codeEditor)) {
                    
    this.codeEditor.setValue(v);
                    
    this.value v;
                }
            }
            return 
    this;
        },
        
        
    onRender: function(){
            
    Ext.ux.form.CodeMirror.superclass.onRender.apply(thisarguments);
            
            
    this.on('afterrender'this.triggerCodeEditorthis, {
                
    singletrue
            
    });
            
        }
    });
    Ext.reg('ux-codemirror'Ext.ux.form.CodeMirror); 
    and CodeMirror Panel extension(featuring seach plugin, code folding, line highlighting, undo, redo, JSLINT):

    PHP Code:
    /*global Ext, Easy, JSLINT, CodeMirror  */


    Ext.ns('Easy.CodeMirror');
    Easy.CodeMirror Ext.extend(Ext.Panel, {
        
        
    sourceCode'/* Easy Road empty source code file */',
        
    initComponent: function() {
            
    this.contentChanged false;
            var 
    oThis this;
            
    this.debugWindow = new Ext.Window({
                
    title'Debug',
                
    width500,
                
    layout'border',
                
    closeAction'hide',
                
    height160,
                
    items: [new Ext.grid.GridPanel({
                    
    layout'fit',
                    
    region'center',
                    
    borderfalse,
                    
    listeners: {
                        
    rowclick: function(grid) {
                            var 
    oData grid.getSelectionModel().getSelected().data;
                            
    oThis.codeMirrorEditor.setCursor(oData.line);
                        }
                    },
                    
    store: new Ext.data.ArrayStore({
                        
    fields: [{
                            
    name'line'
                        
    }, {
                            
    name'character'
                        
    }, {
                            
    name'reason'
                        
    }]
                    }),
                    
    columns: [{
                        
    id'line',
                        
    headerEasy.lang.CodeMirror.debugGridColLine,
                        
    width60,
                        
    sortabletrue,
                        
    dataIndex'line'
                    
    }, {
                        
    id'character',
                        
    headerEasy.lang.CodeMirror.debugGridColChar,
                        
    width60,
                        
    sortabletrue,
                        
    dataIndex'character'
                    
    }, {
                        
    headerEasy.lang.CodeMirror.debugGridColReason,
                        
    width240,
                        
    sortabletrue,
                        
    dataIndex'reason'
                    
    }],
                    
    stripeRowstrue
                
    })]
            });
            
            
            
    Ext.apply(this, {
                
    items: [{
                    
    xtype'textarea',
                    
    readOnlyfalse,
                    
    hiddentrue,
                    
    valuethis.sourceCode
                
    }],
                
    tbar: [{
                    
    iconCls'icon-fugue-disk',
                    
    tooltip'Save',
                    
    handlerthis.triggerOnSave,
                    
    scopethis
                
    }, {
                    
    iconCls'icon-arrow-undo',
                    
    tooltip'Undo',
                    
    handler: function() {
                        
    this.codeMirrorEditor.undo();
                    },
                    
    scopethis
                
    }, {
                    
    iconCls'icon-arrow-redo',
                    
    tooltip'Redo',
                    
    handler: function() {
                        
    this.codeMirrorEditor.redo();
                    },
                    
    scopethis
                
    }, {
                    
    itemId'spellChecker',
                    
    disabledtrue,
                    
    iconCls'icon-fugue-spell-check',
                    
    tooltip'JS Lint',
                    
    handlerthis.validateJSLINT,
                    
    scopethis
                
    }]
            });
            
            
    Easy.CodeMirror.superclass.initComponent.apply(thisarguments);
        },
        
        
    validateJSLINT: function(){
            var 
    bValidates JSLINT(this.findByType('textarea')[0].getValue());
            
            var 
    oStore this.debugWindow.findByType('grid')[0].getStore();
            if (!
    bValidates) {
                var 
    aErrorData = [];
                
                for (var 
    err in JSLINT.errors) {
                    if (
    JSLINT.errors.hasOwnProperty(err) && (JSLINT.errors[err] !== null)) {
                        
    aErrorData.push([JSLINT.errors[err].lineJSLINT.errors[err].characterJSLINT.errors[err].reason]);
                    }
                }
                
                
    oStore.loadData(aErrorDatafalse);
                
    this.debugWindow.show();
                
            }else{
                
    Easy.showInfo('JSLINT says: <br />Congratulation! No errors found.');
            }
        },
        
        
    triggerOnSave: function(){
            
    oThis this;
            var 
    sParserType oThis.parser || 'defo';
                    
            
    oThis.setTitleClass(true);
            var 
    sNewCode oThis.codeMirrorEditor.getValue();
            
            
    oThis.oldSourceCode sNewCode;
            
    oThis.onSave(arguments[0] || false);
        },
        
        
    onRender: function() {
            
    this.oldSourceCode this.sourceCode;
            
    Easy.CodeMirror.superclass.onRender.apply(thisarguments);
            
    // trigger editor on afterlayout
            
    this.on('afterlayout'this.triggerCodeEditorthis, {
                
    singletrue
            
    });
            
        },
        
        
    /** @private */
        
    triggerCodeEditor: function() {
            var 
                
    mode
                
    hlLine,
                
    foldFunc CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder), 
                
    me this;
            
            switch (
    me.parser.toLowerCase()) {
                case 
    'css':
                    
    mode "text/css";
                    break;
                    
                case 
    'js':
                    
    mode "text/javascript";
                    break;
                    
                case 
    'php':
                    
    mode "text/x-php";
                    break;
                    
                case 
    'html':
                    
    mode "application/x-httpd-php";
                    
    foldFunc CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
                    break;
                    
                case 
    'mixed':
                    
    mode "application/x-httpd-php";
                    
    foldFunc CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
                    break;
                
                default:
                    
    mode "application/x-httpd-php";
                    
    foldFunc CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
                    break;
            }
            var 
    oThis this;
            var 
    oCmp this.findByType('textarea')[0];
            
            var 
    editorConfig Ext.applyIf(
               
    this.codeMirror || {}, {
                    
    lineNumberstrue,
                    
    theme'cobalt',
                    
    modemode,
                    
    tabSize4,
                    
    indentUnit4,
                    
    onCursorActivity: function() {
                        
    me.codeMirrorEditor.matchHighlight("CodeMirror-matchhighlight");
                        
                        
    me.codeMirrorEditor.setLineClass(hlLinenullnull);
                        
    hlLine me.codeMirrorEditor.setLineClass(me.codeMirrorEditor.getCursor().linenull"xcme-activeline");
                    },
                    
    onChange: function(){
                        
                        var 
    sCode me.codeMirrorEditor.getValue();
                        
    oCmp.setValue(sCode);
                        
                        if(
    me.oldSourceCode == sCode){
                           
    me.setTitleClass(true);
                        }else{
                           
    me.setTitleClass();
                        }
                    },
                    
    onGutterClickfoldFunc,
                    
    extraKeys: {
                        
    "Ctrl-Q": function(cm){
                            
    foldFunc(cmcm.getCursor().line);
                        },
                        
    "Ctrl-S": function(cm){
                            
    me.triggerOnSave.defer(1me);
                        }
                    }
               }
            );
                
            
            
    this.codeMirrorEditor CodeMirror.fromTextArea(document.getElementById(oCmp.id), editorConfig);
            
    hlLine me.codeMirrorEditor.setLineClass(0"xcme-activeline");
            
            
    // Disable spell check button for non-js content        
            
    var sParserType oThis.parser || 'defo';
            if (
    sParserType == 'js' || sParserType == 'css') {
                
    this.getTopToolbar().getComponent('spellChecker').enable();
            }
            
        },
        
        
    setTitleClass: function(){
            var 
    tabEl Ext.get(this.ownerCt.getTabElthis ));
            if(
    arguments[0] === true){// remove class
                
    tabEl.removeClass"tab-changes" );
                
    this.contentChanged false;
            }else{
    //add class
                
    tabEl.addClass"tab-changes" );
                
    this.contentChanged true;
            }
        }
    });


    Ext.reg('easyCodeMirror'Easy.CodeMirror); 
    Please note that this component extends Panel using "Easy" namespace. Replace that with whatever forks for you(eg: Ext.ux.?). Also note that it is tailored to run as a tab panel (see setTitleClass method), so you can also remove that if oyu don't need it.

  5. #35
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    446
    Vote Rating
    4
    Jangla is on a distinguished road

      0  

    Default


    Quote Originally Posted by vlx View Post
    Hi,

    I have made a port to ExjJS 4.0 and CodeMirror 2.0, hope someone can use it.

    Attachment 26301
    Having some issues with this in Ext 4 when used on a tab panel. Getting this error:
    Uncaught TypeError: Cannot read property 'measuresBox' of null


    EDIT: Looks like this is due to me trying to define a height for the control. Also have another issue - I can't hide the toolbar for some reason.