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

    Ext.ux.form.EditArea


    Feel free to use this as you like, no restrictions.

    Code:
    // Ext.ux.form.EditArea.js
    
    Ext.namespace('Ext.ux.form');
    
    Ext.ux.form.EditArea = Ext.extend(Ext.form.TextArea, {
        initComponent: function() {
            this.eaid = this.id;
            Ext.ux.form.EditArea.superclass.initComponent.apply(this, arguments);
            this.on('resize', function(ta, width, height) {
                var el = Ext.get('frame_editarea-' + this.eaid);
                if (el) {
                    el.setSize(width,height);
                        //var size = dialog.getSize();
                        //el.setSize(size.width - dialog.getFrameWidth(), size.height - dialog.getFrameHeight());
                }
                
            });
            this.on('beforehide', function() {
                editAreaLoader.deleteInstance(this.eaid);
            });
            this.on('beforeshow', function() {
                editAreaLoader.init({
                    id: this.eaid,
                    start_highlight: this.initialConfig.start_highlight || true,
                    language: 'en',
                    syntax: this.initialConfig.syntax,
                    allow_toggle: this.initialConfig.allow_toggle || true,
                    allow_resize: this.initialConfig.allow_resize || false,
                    replace_tab_by_spaces: this.initialConfig.replace_tab_by_spaces || 4,
                    toolbar: this.initialConfig.toolbar || "search, go_to_line, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight, |, help",
                    is_editable: this.initialConfig.is_editable || true
                });
            });
        },
        onRender: function() {
            Ext.ux.form.EditArea.superclass.onRender.apply(this, arguments);
            editAreaLoader.init({
                id: this.eaid,
                start_highlight: this.initialConfig.start_highlight || true,
                language: 'en',
                syntax: this.initialConfig.syntax,
                allow_toggle: this.initialConfig.allow_toggle || true,
                allow_resize: this.initialConfig.allow_resize || false,
                replace_tab_by_spaces: this.initialConfig.replace_tab_by_spaces || 4,
                toolbar: this.initialConfig.toolbar || "search, go_to_line, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight, |, help",
                is_editable: this.initialConfig.is_editable || true
            });
        },
        getValue: function() {
            var v = editAreaLoader.getValue(this.eaid);
            // this should set the textarea's value and fire events
            Ext.ux.form.EditArea.superclass.setValue.apply(this, v);
            return v;
        },
        setValue: function(v) {
            Ext.ux.form.EditArea.superclass.setValue.apply(this, v);
            editAreaLoader.setValue(this.eaid, v);
        },
        validate: function() {
            this.getValue();
            Ext.ux.form.EditArea.superclass.validate.apply(this, arguments);
        }
    });
    
    Ext.reg('ux-editarea', Ext.ux.form.EditArea);
    Example usage:

    Code:
    <script type="text/javascript" src="/path/to/editarea_0_8_1_1/edit_area/edit_area_full.js"></script>
    ...
    
    Ext.onReady(function() {
      new Ext.Viewport({
        layout: 'fit',
        items: [
            {
                xtype: 'ux-editearea',
                syntax: 'html' // or js or php or whatever, see the docs
            }
        ]
    });
    Updated 9/11 to include getValue() and setValue() members.

  2. #2
    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


    Notes:

    The beforehide/beforeshow is experimental. I've not been able to get the editor to work properly in tabs or other containers where the editor can be hidden. I've tried every hideMode configuration option with no luck. The beforehide/beforeshow are not actually triggered if, for example, the editor is a component child of a tab panel, and I don't see any way to detect that it is being hidden.

    If anyone can point out how to detect these events, please post and I'll fix the code.

  3. #3
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Vote Rating
    10
    bt_bruno will become famous soon enough

      0  

    Default


    Isn't editAreaLoader undefined in this code snippet?

  4. #4
    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


    Quote Originally Posted by bt_bruno View Post
    Isn't editAreaLoader undefined in this code snippet?

    <script type="text/javascript" src="/path/to/editarea_0_8_1_1/edit_area/edit_area_full.js"></script>

  5. #5
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Vote Rating
    10
    bt_bruno will become famous soon enough

      0  

    Default


    Quote Originally Posted by mschwartz View Post
    <script type="text/javascript" src="/path/to/editarea_0_8_1_1/edit_area/edit_area_full.js"></script>
    Got it.Christophe EditArea.You should mention it...

  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


    Yeah,

    The URL to read about and download the editor:

    http://www.cdolivet.com/index.php?page=editArea


    The docs show these functions. What I know needs to happen is when the tab or card or whatever has an editarea in it is hidden, the hide() below has to be called. On show, the show() below has to be called.

    How to detect when parent or grandparent, etc., is hidden is the trick. Then this plugin will be 100% right, in terms of not screwing up its display.

    http://www.cdolivet.com/editarea/edi...functions.html
    editAreaLoader.hide(editor_id)

    Hide a textarea and it's related EditArea.
    Parameters editor_id The id of the converted textarea on which the command should be executed. Returns: Nothing.
    editAreaLoader.show(editor_id)

    Restore a textarea and it's related EditArea hidden with the hide() function.
    Parameters editor_id The id of the converted textarea on which the command should be executed. Returns: Nothing.

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

      0  

    Default


    Just implimented this at my job to edit html files online.

    Works as it should except when i tried using Ext getValue() on the fields. I only get the initial set value that i load into the fields on render, not the edited one.

    Switching editArea on/off for a field updates the underlying textarea value and then it saves the correct value that were in the editArea when switched of if i use getValue().

    Switching to the editArea native getvalue works so not really a problem.

    Maybe hooking up the editArea getvalue function inside the textarea getValue to update it so the correct value is saved would work?

  8. #8
    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


    Agreed. I'll fix it tonight.

  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


    Fixed in first post.

    I also added a validate() method which should cause the textarea's value to be updated on form submit.

  10. #10
    Sencha User
    Join Date
    Jul 2008
    Posts
    4
    Vote Rating
    1
    andr83 is on a distinguished road

      0  

    Default


    For tab panel:

    Code:
    Ext.namespace('Ext.ux.form');
    
    Ext.ux.form.EditArea = Ext.extend(Ext.form.TextArea, {
        initComponent: function() {
            this.eaid = this.id;
            Ext.ux.form.EditArea.superclass.initComponent.apply(this, arguments);
            this.mon(this,'resize', function(ta, width, height) {
                var el = Ext.get('frame_' + this.eaid);
                if (el) {
                    el.setSize(width,height);                    
                }
                
            });
        },
        onRender: function() {
            Ext.ux.form.EditArea.superclass.onRender.apply(this, arguments);
            editAreaLoader.init({
    				id: this.eaid,
    				start_highlight: this.initialConfig.start_highlight || true,
    				language: this.initialConfig.language|| 'en',
    				syntax: this.initialConfig.syntax,
    				syntax_selection_allow: "css,html,js,php,python,vb,xml,c,cpp,sql,basic,pas,brain",
    				allow_toggle: this.initialConfig.allow_toggle || true,
    				allow_resize: this.initialConfig.allow_resize || false,
    				replace_tab_by_spaces: this.initialConfig.replace_tab_by_spaces || 4,
    				toolbar: this.initialConfig.toolbar || "search, go_to_line, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight, |, help",
    				is_editable: this.initialConfig.is_editable || true,
    				show_line_colors: true,
    				//plugins: "autocomplite",
    				autocompletion:true
    			});
        },
        getValue: function() {
            var v = editAreaLoader.getValue(this.eaid);
            return v;
        },
        setValue: function(v) {
            Ext.ux.form.EditArea.superclass.setValue.apply(this, arguments);
            editAreaLoader.setValue(this.eaid, v);
        },
        validate: function() {
            this.getValue();
            Ext.ux.form.EditArea.superclass.validate.apply(this, arguments);
        },
    	insertText: function(text){
    		editAreaLoader.setSelectedText(this.eaid, text);
    	},
    	hide: function(){
    		editAreaLoader.hide(this.eaid);
    	},
    	show: function(){
    		editAreaLoader.show(this.eaid)
    	}
    	
    });
    Ext.reg('ux-editarea', Ext.ux.form.EditArea);
    And in my code:

    Code:
    var queryEditor = new Ext.ux.form.EditArea({
                syntax: 'sql',
                language:'ru',
                allow_toggle:false
            });
    
    new Ext.Panel({
      id:'querEditorPanel',
      title:'Sql editor',
      layout:'fit',
      items: queryEditor,
      listeners:{
        activate: function(){
             queryEditor.show.defer(100,queryEditor);
        },
        beforehide: function(){
             queryEditor.hide();
        }
     }
    });
    It works for me