1. #1
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default Ext.ux.form.CodeMirror

    Ext.ux.form.CodeMirror


    http://marijn.haverbeke.nl/codemirror/

    CodeMirror is a pretty awesome programmer's source code editor written in Javascript. Until someone writes emacs in Javascript for web browsers, that is.

    Anyhow, here's source code to an extension I wrote for it. Feel free to use it, hack it, whatever you like. You owe me nothing.

    The following CSS is required:
    Code:
    .codemirror-iframe {
    	background: white;
    	color: black;
    }
    
    .CodeMirror-line-numbers {
    	font-size: 10pt;
    	margin: 0.4em;
    	font-family: monospace;
    	text-align: right;
    }
    Code:
    Ext.namespace('Ext.ux.form');
    
    Ext.ux.form.CodeMirror = Ext.extend(Ext.form.TextArea, {
    	language: 'txt',
    	codeMirrorPath: null, // should be path to code mirror on your server!
    	initComponent: function() {
    		if (this.codeMirrorPath === null) {
    			throw 'Ext.ux.form.CodeMirror: codeMirrorPath required';
    		}
    		this.initialized = false;
    		Ext.ux.form.CodeMirror.superclass.initComponent.apply(this, arguments);
    		this.addEvents('initialize');
    		this.on({
    			resize: function(ta, width, height) {
    				var el = Ext.select('.'+this.id, true);
    				if (el) {
    					width -= 35;
    					el.elements.forEach(function(e) {
    						e.setSize(width, height);
    					});
    				}
    			},
    			afterrender: function() {
    				var parser, stylesheet;
    				switch (this.language.toLowerCase()) {
    					case 'css':
    						parser = 'parsecss.js';
    						stylesheet = this.codeMirrorPath+'/css/csscolors.css';
    						break;
    					case 'js':
    						parser = ['tokenizejavascript.js', 'parsejavascript.js'];
    						stylesheet = this.codeMirrorPath+'/css/jscolors.css';
    						break;
    					case 'php':
    						parser = [
    							"parsexml.js",
    							"parsecss.js",
    							"tokenizejavascript.js",
    							"parsejavascript.js",
    							"../contrib/php/js/tokenizephp.js",
    							"../contrib/php/js/parsephp.js",
    							"../contrib/php/js/parsephphtmlmixed.js"
    						];
    						stylesheet = [
    							this.codeMirrorPath+'/css/xmlcolors.css',
    							this.codeMirrorPath+'/css/jscolors.css',
    							this.codeMirrorPath+'/css/csscolors.css',
    							this.codeMirrorPath+'/contrib/php/css/phpcolors.css'
    						];
    						break;
    					case 'htm':
    					case 'html':
    					case 'xml':
    						parser = 'parsexml.js';
    						stylesheet = 'xmlcolors.css';
    						break;
    					default:
    						parser = 'parsedummy.js';
    						stylesheet = '';
    						break;
    					
    				}
    				var me = this;
    				me.codeEditor = new CodeMirror.fromTextArea(me.id, {
    					parserfile: parser,
    					stylesheet: stylesheet,
    					path: me.codeMirrorPath+'/js/',
    					textWrapping: false,
    					lineNumbers: true,
    					iframeClass: 'codemirror-iframe '+me.id,
    					content: me.initialConfig.value,
    					initCallback: function() {
    						me.initialized = true;
    						me.fireEvent('initialize', true);
    					}
    				});
    			}
    		});
    	},
    	getValue: function() {
    		if (this.initialized) {
    			return this.codeEditor.getCode();
    		}
    		return this.initialConfig.value;	
    	},
    	setValue: function(v) {
    		if (this.initialized) {
    			this.codeEditor.setCode(v);
    		}
    	},
    	validate: function() {
    		this.getValue();
    		Ext.ux.form.CodeMirror.superclass.validate.apply(this, arguments);
    	}
    });
    Ext.reg('ux-codemirror', Ext.ux.form.CodeMirror);
    It's really simple to use:

    Code:
    {
      xtype: 'ux-codemirror',
      codeMirrorPath: 'path_to_codemirror_on_server',
      language: 'js', // possibilities: 'js', 'css', 'php', 'htm', 'html', 'xml', anything else is plain text
      listeners: { // optional
        init: function() {
        }
      }
    }
    NOTE: You need to include codemirror.js in the head of your HTML:

    Code:
    <head>
    ...
    <script type="text/javascript" src="path/to/CodeMirror-0.63/js/codemirror.js"></script>
    ...
    </head>
    Tested with 3.0. I suspect it works with 3.1, haven't tested it. Might work with 2.x, too.
    Attached Images

  2. #2
    Sencha User grigory666's Avatar
    Join Date
    Nov 2008
    Location
    Russia
    Posts
    76
    Vote Rating
    0
    grigory666 is on a distinguished road

      0  

    Default


    Thank you, mschwartz!
    It is cool extension.
    I have one question about strings numbers. I get only 6 rows. Why?

    I use it so:
    Code:
     var CMpanel = new Ext.Panel({
      layout       : 'fit',
      frame        : true,
      items        : [{
                  xtype           : 'ux-codemirror',
                  codeMirrorPath  : 'js/codemirror',
                  language        : 'html' 
                  }]
    });                                                        
              
    new Ext.Window({
        layout     : 'fit',
        width      : 500,
        height     : 300,
        items      : [CMpanel]
    }).show();
    Maybe, do I something wrong?

    Could you show an example?
    Attached Images

  3. #3
    Ext User
    Join Date
    Dec 2009
    Posts
    18
    Vote Rating
    0
    cq.yangyu@gmail.com is on a distinguished road

      0  

    Default


    Is there any version or sample for java programer ?

  4. #4
    Ext User
    Join Date
    Feb 2008
    Posts
    7
    Vote Rating
    0
    linux_china is on a distinguished road

      0  

    Default


    Can you upload the example code?

  5. #5
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, GoiĆ¢nia
    Posts
    394
    Vote Rating
    4
    wemerson.januario is on a distinguished road

      0  

    Default


    Thanks for sharing your work!

  6. #6
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    codemirror 0.65 has that error with the line numbers.

    If you can download 0.63, use that.

  7. #7
    Ext User
    Join Date
    Mar 2008
    Posts
    7
    Vote Rating
    0
    pedroteixeira is on a distinguished road

      0  

    Default


    Do you have any idea what might be causing CTRL+V to duplicate text in this componente?

    thanks!
    Pedro

  8. #8
    Sencha User
    Join Date
    Oct 2009
    Posts
    44
    Vote Rating
    0
    coolstar is on a distinguished road

      0  

    Default Doesn't work in firefox.

    Doesn't work in firefox.


    Hi all. This extension looks neat, but I am having trouble in firefox. The window opens, but codemirror doesn't show in firefox. It works fine in chrome.

    Here is the code:

    Code:
    MyDesktop.CompilerModule = Ext.extend(Ext.app.Module, {
        id:'compiler-win',
        appType : 'compiler',
        init : function(){
            this.launcher = {
                text: 'Program Coder',
                iconCls:'browser',
                handler : this.createWindow,
                scope: this
            }
        },
    
        createWindow : function(){
    	var codertabindex = 1;
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('compiler-win');
            if(!win){	
                win = desktop.createWindow({
    				id: 'compiler-win',
    				title:'Program Coder',
    				width:740,
    				height:480,
    				iconCls: 'bogus',
    				shim:false,
    				animCollapse:false,
    				constrainHeader:true,
    				layout: 'fit',
    				items: new Ext.TabPanel({
    			                        enableTabScroll: true,
    			                        id:'tabbedcompiler',
    						activeTab: 0,
    			                        plugins: [ 'tabtitleedit',Ext.ux.AddTabButton ],
    						createTab: function() {
    							 codertabindex = codertabindex + 1;
    							 return {
    								title: 'Editor ' + codertabindex,
    								xtype: 'ux-codemirror',
    								codeMirrorPath: '../codemirror/',
    								language: 'js', // possibilities: 'js', 'css', 'php', 'htm', 'html', 'xml', anything else is plain text
    								closable:true,
    							};
    						},
    						items: [{
    							title: 'Editor 1',
    							xtype: 'ux-codemirror',
    							codeMirrorPath: '../codemirror/',
    							language: 'js', // possibilities: 'js', 'css', 'php', 'htm', 'html', 'xml', anything else is plain text
    							closable: false,
    						}],
    						listeners: {
    							remove: function(){
    									codertabindex = codertabindex - 1 ;
    							}
    						
    						}	
    					})
    		});
    
            }
            win.show();
        }
    });
    Using:
    Extjs 3.1 (Desktop)
    Firefox 3.5/Chrome 4.0

  9. #9
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    What does the net tab in firebug tell you? Is it fetching the codemirror files?

    I would set a breakpoint in the render function of the extension and step through and see what it is doing.

  10. #10
    Sencha User
    Join Date
    Oct 2009
    Posts
    44
    Vote Rating
    0
    coolstar is on a distinguished road

      0  

    Default It is.

    It is.


    I checked the net tab in firebug, and it is fetching the codemirror files, but it doesn't show. I noticed that it uses an iframe. When I reloaded the iframe using firefox's context menu, codemirror shows, but I can't have the user reload the iframe themselves.