1. #1
    Ext JS Premium Member
    Join Date
    Jul 2007
    Location
    Denmark
    Posts
    6
    Vote Rating
    0
    vlx is on a distinguished road

      0  

    Default Ext.ux.panel.Codemirror

    Ext.ux.panel.Codemirror


    Hi

    I have a simple port of the Ext.ux.panel.Codemirror to ExtJs 4.0 and Codemirror 2.0.

    PHP Code:
    /*global Ext, CodeMirror  */

    /**
     * @class Ext.ux.panel.CodeMirror
     * @extends Ext.Panel
     * Converts a panel into a code mirror editor with toolbar
     * @constructor
     * 
     * @author Dan Ungureanu - ungureanu.web@gmail.com / http://www.devweb.ro
     * @ported by Peter Biro - plb@siteworks.dk / http://www.siteworks.dk
     * @version 0.2.1
     */

     // Define a set of code type configurations
    Ext.ns('Ext.ux.panel.CodeMirrorConfig');
    Ext.apply(Ext.ux.panel.CodeMirrorConfig, {
        
    cssPath"/Scripts/ExtJs/codemirror/CodeMirror-2.0/css/",
        
    jsPath"/Scripts/ExtJs/codemirror/CodeMirror-2.0/mode/"
    });




    Ext.ns('Ext.ux.panel.CodeMirror');
    Ext.define('Ext.ux.panel.CodeMirror', {
        
    extend'Ext.Panel',
        
    alias'widget.uxCodeMirrorPanel',
        
    sourceCode'/* Default code */',
        
    initComponent: function() {
            
    // this property is used to determine if the source content changes
            
    if (this.sourceId!=null)
            {
                
    this.sourceCode Ext.get(this.sourceId).getValue();
            }
            
    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.jumpToLine(oData.line);
                        }
                    },
                    
    store: new Ext.data.ArrayStore({
                        
    fields: [{
                            
    name'line'
                        
    }, {
                            
    name'character'
                        
    }, {
                            
    name'reason'
                        
    }]
                    }),
                    
    columns: [{
                        
    id'line',
                        
    header'Line',
                        
    width60,
                        
    sortabletrue,
                        
    dataIndex'line'
                    
    }, {
                        
    id'character',
                        
    header'Character',
                        
    width60,
                        
    sortabletrue,
                        
    dataIndex'character'
                    
    }, {
                        
    header'Description',
                        
    width240,
                        
    sortabletrue,
                        
    dataIndex'reason'
                    
    }],
                    
    stripeRowstrue
                
    })]
            });
            
            
    Ext.apply(this, {
                
    items: [{
                    
    xtype'textarea',
                    
    readOnlyfalse,
                    
    hiddenfalse,
                    
    inputIdthis.setId,
                    
    valuethis.sourceCode
                    
                    
                
    }],
                
    tbar: [{
                    
    text'Quick Save',
                    
    iconCls'icoSaveFile',
                    
    handlerthis.triggerOnSave,
                    
    scopethis
                
    }, {
                    
    text'Undo',
                    
    iconCls'icoUndo',
                    
    handler: function() {
                        
    this.codeMirrorEditor.undo();
                    },
                    
    scopethis
                
    }, {
                    
    text'Redo',
                    
    iconCls'icoRedo',
                    
    handler: function() {
                        
    this.codeMirrorEditor.redo();
                    },
                    
    scopethis
                
    }]
            });
            
            
    Ext.ux.panel.CodeMirror.superclass.initComponent.apply(thisarguments);
        },
        
        
    triggerOnSave: function(){
            
    this.setTitleClass(true);
            var 
    sNewCode this.codeMirrorEditor.getValue();
            
            
    //Ext.state.Manager.set("edcmr_"+this.itemId+'_lnmbr', this.codeMirrorEditor.currentLine());
            
            
    this.oldSourceCode sNewCode;
            
    this.onSave(arguments[0] || false);
        },
        
        
    onRender: function() {
            
    this.oldSourceCode this.sourceCode;
            
    Ext.ux.panel.CodeMirror.superclass.onRender.apply(thisarguments);
            
    // trigger editor on afterlayout
            
    this.on('afterlayout'this.triggerCodeEditorthis, {
                
    singletrue
            
    });
            
        },
        
        
    /** @private */
        
    triggerCodeEditor: function() {
            
    //this.codeMirrorEditor;
            
    var oThis this;

            var 
    oCmp this.items.items[0];//this.findParentByType('textarea')[0];
            
    var editorConfig Ext.applyIf(this.codeMirror || {}, {
               
    height"100%",
               
    width"100%",
               
    modethis.parser,
               
    lineNumberstrue,
               
    textWrappingfalse,
               
    contentoCmp.getValue(),
               
    indentUnit4,
               
    tabMode'shift',
               
    readOnlyoCmp.readOnly,
               
    pathExt.ux.panel.CodeMirrorConfig.jsPath,
               
    autoMatchParenstrue,
               
    initCallback: function(editor) {
                   
    editor.win.document.body.lastChild.scrollIntoView();
                   try {
                       var 
    iLineNmbr = ((Ext.state.Manager.get("edcmr_" oThis.itemId '_lnmbr') !== undefined) ? Ext.state.Manager.get("edcmr_" oThis.itemId '_lnmbr') : 1);
                       
    //console.log(iLineNmbr);
                       
    editor.jumpToLine(iLineNmbr);
                   }catch(
    e){
                       
    //console.error(e);
                   
    }
               }
           });
                    function forEach(array, 
    action) {
                    for (var 
    0< array.lengthi++)
                      
    action(array[i]);
                  }
            var 
    sParserType oThis.parser || 'defo';
         
            
    this.codeMirrorEditor = new CodeMirror.fromTextAreadocument.getElementById(this.setId), editorConfig); //editorConfig
            

        
    },
        
        
    setTitleClass: function(){
            
    //var tabEl = Ext.get(this.ownerCt.getTabEl( this ));
            
    if(arguments[0] === true){// remove class
                //tabEl.removeClass( "tab-changes" );
                
    this.contentChanged false;
            }else{
    //add class
                //tabEl.addClass( "tab-changes" );
                
    this.contentChanged true;
            }
        }
    }); 
    There is still some need for cleanup, but it's working for now

    Download it here:
    http://www.sencha.com/forum/showthre...l=1#post606966

  2. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    nice thanks for this.
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

Thread Participants: 1

Tags for this Thread