Page 1 of 8 123 ... LastLast
Results 1 to 10 of 72

Thread: Ext.ux.form.CodeMirror

  1. #1
    Sencha - Ext JS Dev Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,056
    Vote Rating
    19
      0  

    Default 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 Attached Images

  2. #2
    Sencha User grigory666's Avatar
    Join Date
    Nov 2008
    Location
    Russia
    Posts
    76
    Vote Rating
    0
      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 Attached Images
    • File Type: jpg cm.JPG (15.1 KB, 2463 views)

  3. #3
    Ext User
    Join Date
    Dec 2009
    Posts
    18
    Vote Rating
    0
      0  

    Default

    Is there any version or sample for java programer ?

  4. #4
    Ext User
    Join Date
    Feb 2008
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Can you upload the example code?

  5. #5
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goinia - GO, Brazil
    Posts
    634
    Vote Rating
    48
      0  

    Default

    Thanks for sharing your work!

  6. #6
    Sencha - Ext JS Dev Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,056
    Vote Rating
    19
      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
      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
      0  

    Default 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 - Ext JS Dev Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,056
    Vote Rating
    19
      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
      0  

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

Page 1 of 8 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •