erp_app 4.0.0 → 4.2.0

data/app/assets/javascripts/erp_app/shared/audit_log/TabPanel.js

@@ -0,0 +1,116 @@
+Ext.define("Compass.ErpApp.Shared.AuditLog.TabPanel", {
+    alias: 'widget.auditlogtabpanel',
+    extend: "Ext.tab.Panel",
+    autoScroll: true,
+
+    /**
+     * @cfg {String} event_record_type
+     * Record type of the event record to limit results by.
+     */
+    eventRecordType: null,
+
+    /**
+     * @cfg {Int} event_record_id
+     * Id of the event record to limit results by.
+     */
+    eventRecordId: null,
+
+    /**
+     * @cfg {Boolean} showToolbar
+     * True to render toolbar.
+     */
+    showToolbar: false,
+
+    plugins: Ext.create('Ext.ux.TabCloseMenu', {
+        extraItemsTail: [
+            '-',
+            {
+                text: 'Closable',
+                checked: true,
+                hideOnClick: true,
+                handler: function (item) {
+                    currentItem.tab.setClosable(item.checked);
+                }
+            },
+            '-',
+            {
+                text: 'Enabled',
+                checked: true,
+                hideOnClick: true,
+                handler: function (item) {
+                    currentItem.tab.setDisabled(!item.checked);
+                }
+            }
+        ],
+        listeners: {
+            beforemenu: function (menu, item) {
+                var enabled = menu.child('[text="Enabled"]');
+                menu.child('[text="Closable"]').setChecked(item.closable);
+                if (item.tab.active) {
+                    enabled.disable();
+                } else {
+                    enabled.enable();
+                    enabled.setChecked(!item.tab.isDisabled());
+                }
+
+                currentItem = item;
+            }
+        }
+    }),
+
+    getStore: function () {
+        return this.down('auditloggridpanel').store;
+    },
+
+    constructor: function (config) {
+        var me = this;
+
+        me.addEvents({
+            'auditLogEntrySelected': true
+        });
+
+        var listeners = {
+            render: function () {
+                me.getStore().load({
+                    params: {
+                        start: 0,
+                        limit: 25
+                    }
+                });
+            },
+            auditLogEntrySelected: function (auditLogEntry) {
+                var audit_log_item_grid = Ext.create('widget.auditlogitemgridpanel',
+                    {
+                        closable: true,
+                        listeners: {
+                            'afterrender': function (comp) {
+                                comp.store.load({params: {audit_log_id: auditLogEntry.get('id')}});
+                            }
+                        }
+                    }
+                );
+                me.add(audit_log_item_grid);
+                me.setActiveTab(audit_log_item_grid);
+            }
+        };
+
+        config['listeners'] = Ext.apply(listeners, config['listeners']);
+
+        me.callParent([config]);
+    },
+
+    initComponent: function () {
+        var me = this;
+
+        me.items = [
+            {
+                xtype: 'auditloggridpanel',
+                showToolbar: me.showToolbar,
+                eventRecordType: me.eventRecordType,
+                eventRecordId: me.eventRecordId
+            }
+        ];
+
+        me.callParent();
+    }
+});

data/app/assets/javascripts/erp_app/shared/compass_ckeditor.js

@@ -0,0 +1,267 @@
+// This configuration was taken from http://docs.cksource.com/CKEditor_3.x/Howto/FCKeditor_HTML_Output
+// It changes the source formatting (indentation) back to FCKeditor formatting
+// indentationChars is set to 2 spaces
+Ext.onReady(function () {
+    try {
+        CKEDITOR.on('instanceReady', function (ev) {
+            var writer = ev.editor.dataProcessor.writer;
+            // The character sequence to use for every indentation step.
+            writer.indentationChars = '  ';
+
+            var dtd = CKEDITOR.dtd;
+            // Elements taken as an example are: block-level elements (div or p), list items (li, dd), and table elements (td, tbody).
+            for (var e in CKEDITOR.tools.extend({}, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
+                ev.editor.dataProcessor.writer.setRules(e, {
+                    // Indicates that an element creates indentation on line breaks that it contains.
+                    indent: false,
+                    // Inserts a line break before a tag.
+                    breakBeforeOpen: true,
+                    // Inserts a line break after a tag.
+                    breakAfterOpen: false,
+                    // Inserts a line break before the closing tag.
+                    breakBeforeClose: false,
+                    // Inserts a line break after the closing tag.
+                    breakAfterClose: true
+                });
+            }
+
+            for (var e in CKEDITOR.tools.extend({}, dtd.$list, dtd.$listItem, dtd.$tableContent)) {
+                ev.editor.dataProcessor.writer.setRules(e, {
+                    indent: true
+                });
+            }
+
+            // You can also apply the rules to a single element.
+            ev.editor.dataProcessor.writer.setRules('table',
+                {
+                    indent: true
+                });
+
+            ev.editor.dataProcessor.writer.setRules('form',
+                {
+                    indent: true
+                });
+            
+            //set focus
+            ev.editor.focus();
+
+        });
+    }catch (e) {
+    }
+});
+
+/**
+ * @class Compass.ErpApp.Shared.CKeditor
+ * @extends Ext.form.field.TextArea
+ * Converts a textarea into a CkEditor Instance
+ *
+ * @author Russell Holmes - russellfholmes@gmail.com / http://www.portablemind.com
+ *
+ * @additional config options
+ * ckEditorConfig - configuration for CkEditor Instance
+ */
+Ext.define("Compass.ErpApp.Shared.CKeditor", {
+    extend: "Ext.form.field.TextArea",
+    alias: 'widget.ckeditor',
+    ckEditorInstance: null,
+
+    initComponent: function () {
+        this.callParent(arguments);
+
+        this.addEvents(
+            /**
+             * @event save
+             * Fired when saving contents.
+             * @param {Compass.ErpApp.Shared.CKeditor} cKeditor This object
+             * @param (contents) contents needing to be saved
+             */
+            'save',
+            /**
+             * @event ckeditordrop
+             * Fired when item is dropped into ckeditor.
+             * @param {Compass.ErpApp.Shared.CKeditor} cKeditor This object
+             * @param {Event} drop event
+             */
+            'ckeditordrop'
+        );
+    },
+
+    constructor: function (config) {
+        config = Ext.apply({
+            grow: true,
+            hideLabel: true
+        }, config);
+
+        this.callParent([config]);
+    },
+
+    onRender: function (ct, position) {
+        this.callParent(arguments);
+        this.setupCkEditor();
+        this.on('resize', this.textAreaResized, this);
+    },
+
+    setupCkEditor: function () {
+        var me = this;
+
+        Ext.applyIf(this.initialConfig.ckEditorConfig, {
+            resize_enabled: false,
+            keystrokes: [
+                [CKEDITOR.CTRL + 83 /* S */, 'saveCommand']
+            ],
+            allowedContent : true,
+            base_path: '/javascripts/ckeditor/',
+            toolbarStartupExpanded: true,
+            enterMode: CKEDITOR.ENTER_BR,
+            shiftEnterMode: CKEDITOR.ENTER_P,
+            baseFloatZIndex: 20000
+        });
+        var editor = CKEDITOR.replace(this.inputEl.id, this.initialConfig.ckEditorConfig);
+
+        editor.addCommand('saveCommand', {
+            exec: function (editor, data) {
+                me.fireEvent('save', me, me.getValue());
+                //event handler
+                return function (e) {
+                    e = e || window.event;
+                    e.e_stopPropagation();
+                }
+            }
+        });
+
+        editor.on('contentDom', function () {
+            // Check if browser supports HTML5 FileReader
+            if (window.FileReader) {
+                var head = editor.document.getHead(),
+                    hoverClass = "cke-image-dd",
+                    hoverClassRegex = new RegExp(" " + hoverClass, "g");
+
+                style = CKEDITOR.dom.element.createFromHtml('<style>.cke-image-dd {box-shadow: 0 0 10px 1px #999 inset !important;}</style>');
+                head.append(style);
+
+                var body = editor.document.getBody();
+
+                Compass.ErpApp.Utility.addEventHandler(body.$, 'dragover', function (e) {
+                    e.preventDefault();
+
+                    // add drag over css
+                    currentClassName = body.$.getAttribute('class');
+                    if (currentClassName && currentClassName.indexOf(hoverClass) === -1) {
+                        body.$.setAttribute('class', currentClassName + " " + hoverClass);
+                    }
+
+                    return false;
+                });
+
+                Compass.ErpApp.Utility.addEventHandler(body.$, 'dragenter', function (e) {
+                    e.preventDefault();
+
+                    // add drag over css
+                    currentClassName = body.$.getAttribute('class');
+                    if (currentClassName && currentClassName.indexOf(hoverClass) === -1) {
+                        body.$.setAttribute('class', currentClassName + " " + hoverClass);
+                    }
+
+                    return false;
+                });
+
+                Compass.ErpApp.Utility.addEventHandler(body.$, 'dragleave', function (e) {
+                    e.preventDefault();
+
+                    // remove drag over css
+                    currentClassName = body.$.getAttribute('class');
+                    if (currentClassName.indexOf(hoverClass) != -1) {
+                        body.$.setAttribute('class', currentClassName.replace(hoverClassRegex, ''));
+                    }
+
+                    return false;
+                });
+
+                Compass.ErpApp.Utility.addEventHandler(body.$, 'drop', function (e) {
+                    e.preventDefault();
+
+                    me.fireEvent('ckeditordrop', me, e);
+
+                    // remove drag over css
+                    currentClassName = body.$.getAttribute('class');
+                    if (currentClassName.indexOf(hoverClass) != -1) {
+                        body.$.setAttribute('class', currentClassName.replace(hoverClassRegex, ''));
+                    }
+
+                    return false;
+                });
+            }
+        });
+
+        editor.extjsPanel = this;
+        this.ckEditorInstance = editor;
+        this.setValue(this.defaultValue);
+
+    },
+
+    textAreaResized: function (textarea, adjWidth, adjHeight) {
+
+        if (!Compass.ErpApp.Utility.isBlank(this.ckEditorInstance)) {
+            if (!Compass.ErpApp.Utility.isBlank(adjWidth) && !Compass.ErpApp.Utility.isBlank(adjHeight)) {
+                var el = document.getElementById('cke_contents_' + this.inputEl.id);
+
+                if (!Compass.ErpApp.Utility.isBlank(el)) {
+                    var toolBoxDiv = document.getElementById('cke_top_' + this.inputEl.id).getElementsByTagName('div')[0];
+                    var toolBoxEl = Ext.get(toolBoxDiv);
+                    var displayValue = toolBoxEl.getStyle('display');
+                    if (displayValue != 'none') {
+                        //this.ckEditorInstance.execCommand( 'toolbarCollapse' );
+                        el.style.height = adjHeight - 140 + 'px';
+                        el.style.width = adjWidth + 'px';
+                        //this.ckEditorInstance.execCommand( 'toolbarCollapse' );
+                    }
+                    else {
+                        el.style.height = adjHeight - 70 + 'px';
+                        el.style.width = adjWidth + 'px';
+                    }
+
+                }
+                else {
+                    this.ckEditorInstance.config.height = adjHeight - 140;
+                }
+            }
+        }
+    },
+
+    setValue: function (value) {
+
+        if (this.ckEditorInstance) {
+            this.ckEditorInstance.setData(value);
+        }
+        else {
+            this.defaultValue = value;
+        }
+
+    },
+
+    getValue: function () {
+        if (this.ckEditorInstance)
+            var value = this.ckEditorInstance.getData();
+        return value;
+    },
+
+    getRawValue: function () {
+        if (this.ckEditorInstance)
+            var value = this.ckEditorInstance.getData();
+        return value;
+    },
+
+    insertHtml: function (html) {
+        if (this.ckEditorInstance) {
+            this.ckEditorInstance.focus();
+            this.ckEditorInstance.insertHtml(html, 'unfiltered_html');
+        }
+    },
+
+    insertElement: function (element) {
+        if (this.ckEditorInstance) {
+            this.ckEditorInstance.focus();
+            this.ckEditorInstance.insertElement(element);
+        }
+    }
+});

data/app/assets/javascripts/erp_app/shared/compass_codemirror.js

@@ -0,0 +1,464 @@
+/**
+ * @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
+ * @Enhanced Russell Holmes
+ */
+
+Ext.define("Compass.ErpApp.Shared.CodeMirror", {
+    extend: "Ext.panel.Panel",
+    header: false,
+    alias: 'widget.codemirror',
+    codeMirrorInstance: null,
+
+    statics: {
+
+        /**
+         * Helper method to determine mode for CodeMirror based on file type
+         */
+
+        determineCodeMirrorMode: function (fileName) {
+            var fileType = fileName.split('.').pop(),
+                mode = null;
+
+            switch (fileType) {
+                case 'rb':
+                    mode = 'ruby';
+                    break;
+                case 'erb':
+                case 'rhtml':
+                    mode = 'rhtml';
+                    break;
+                case 'liquid':
+                    mode = 'rhtml';
+                    break;
+                case 'css':
+                    mode = 'css';
+                    break;
+                case 'js':
+                    mode = 'javascript';
+                    break;
+                case 'sql':
+                    mode = 'sql';
+                    break;
+                case 'yml':
+                case 'yaml':
+                    mode = 'yaml';
+                    break;
+                case 'md':
+                    mode = 'markdown';
+                    break;
+                case 'html':
+                    mode = 'htmlmixed';
+                    break;
+                case 'xml':
+                    mode = 'xml';
+                    break;
+            }
+
+            return mode;
+        }
+    },
+
+    /**
+     * @cfg {String} mode The default mode to use when the editor is initialized. When not given, this will default to the first mode that was loaded.
+     * It may be a string, which either simply names the mode or is a MIME type associated with the mode. Alternatively,
+     * it may be an object containing configuration options for the mode, with a name property that names the mode
+     * (for example {name: "javascript", json: true}). The demo pages for each mode contain information about what
+     * configuration parameters the mode supports.
+     */
+    mode: null,
+
+    /**
+     * @cfg {Boolean} showMode Enable mode combo in the toolbar.
+     */
+    showMode: true,
+
+    /**
+     * @cfg {Boolean} showLineNumbers Enable line numbers button in the toolbar.
+     */
+    showLineNumbers: true,
+
+    /**
+     * @cfg {Boolean} enableMatchBrackets Force matching-bracket-highlighting to happen
+     */
+    enableMatchBrackets: true,
+
+    /**
+     * @cfg {Boolean} enableElectricChars Configures whether the editor should re-indent the current line when a character is typed
+     * that might change its proper indentation (only works if the mode supports indentation).
+     */
+    enableElectricChars: false,
+
+    /**
+     * @cfg {Boolean} enableIndentWithTabs Whether, when indenting, the first N*tabSize spaces should be replaced by N tabs.
+     */
+    enableIndentWithTabs: true,
+
+    /**
+     * @cfg {Boolean} enableSmartIndent Whether to use the context-sensitive indentation that the mode provides (or just indent the same as the line before).
+     */
+    enableSmartIndent: true,
+
+    /**
+     * @cfg {Boolean} enableLineWrapping Whether CodeMirror should scroll or wrap for long lines.
+     */
+    enableLineWrapping: true,
+
+    /**
+     * @cfg {Boolean} enableLineNumbers Whether to show line numbers to the left of the editor.
+     */
+    enableLineNumbers: true,
+
+    /**
+     * @cfg {Boolean} enableCodeFolding Whether to allow code folding.
+     */
+    enableCodeFolding: true,
+
+    /**
+     * @cfg {Boolean} enableGutter Can be used to force a 'gutter' (empty space on the left of the editor) to be shown even
+     * when no line numbers are active. This is useful for setting markers.
+     */
+    enableGutter: true,
+
+    /**
+     * @cfg {Boolean} enableFixedGutter When enabled (off by default), this will make the gutter stay visible when the
+     * document is scrolled horizontally.
+     */
+    enableFixedGutter: false,
+
+    /**
+     * @cfg {Number} firstLineNumber At which number to start counting lines.
+     */
+    firstLineNumber: 1,
+
+    /**
+     * @cfg {Boolean} readOnly <tt>true</tt> to mark the field as readOnly.
+     */
+    readOnly: false,
+
+    /**
+     * @cfg {Number} pollInterval Indicates how quickly (miliseconds) CodeMirror should poll its input textarea for changes.
+     * Most input is captured by events, but some things, like IME input on some browsers, doesn't generate events
+     * that allow CodeMirror to properly detect it. Thus, it polls.
+     */
+    pollInterval: 100,
+
+    /**
+     * @cfg {Number} indentUnit How many spaces a block (whatever that means in the edited language) should be indented.
+     */
+    indentUnit: 4,
+
+    /**
+     * @cfg {Number} tabSize The width of a tab character.
+     */
+    tabSize: 4,
+
+    /**
+     * @cfg {String} theme The theme to style the editor with. You must make sure the CSS file defining the corresponding
+     * .cm-s-[name] styles is loaded (see the theme directory in the distribution). The default is "default", for which
+     * colors are included in codemirror.css. It is possible to use multiple theming classes at once—for example
+     * "foo bar" will assign both the cm-s-foo and the cm-s-bar classes to the editor.
+     */
+    theme: 'cobalt',
+
+    /**
+     * @cfg {Boolean} disable save button.
+     */
+    disableSave: false,
+
+    /**
+     * @cfg {Array} additional toolbar items to add.
+     */
+    tbarItems: [],
+
+    /**
+     * @cfg {Array} disable toolbar.
+     */
+    disableToolbar: false,
+
+    constructor: function (config) {
+        config = Ext.applyIf({
+            layout: 'fit',
+            autoScroll: true,
+            items: [
+                {
+                    xtype: 'textarea',
+                    height: '100%',
+                    value: config.sourceCode
+                }
+            ]
+        }, config);
+
+        this.callParent([config]);
+    },
+
+    initComponent: function () {
+        var me = this;
+
+        me.addEvents(
+            /**
+             * @event save
+             * Fired when saving contents.
+             * @param {Compass.ErpApp.Shared.CodeMirror} codemirror This object
+             * @param (contents) contents needing to be saved
+             */
+            'save'
+        );
+
+        me.callParent(arguments);
+
+        me.createToolbar();
+
+        me.on('resize', function () {
+            if (me.codeMirrorInstance) {
+                me.codeMirrorInstance.refresh();
+            }
+        }, me);
+    },
+
+    onRender: function (ct, position) {
+        this.callParent(arguments);
+        this.on('afterlayout', this.setupCodeMirror, this, {
+            single: true
+        });
+    },
+
+    createToolbar: function (editor) {
+        var me = this,
+            availableModes = [],
+            tipsEnabled = Ext.tip.QuickTipManager && Ext.tip.QuickTipManager.isEnabled(),
+            baseCSSPrefix = Ext.baseCSSPrefix;
+
+        Ext.each(Ext.Object.getKeys(CodeMirror.modes), function (name) {
+            if (name == 'null') {
+                availableModes.push(['text/plain'])
+            }
+            else {
+                availableModes.push([name])
+            }
+        });
+
+        availableModes.push(['rhtml']);
+
+        items = [];
+
+        // change mode
+        if (me.showMode) {
+            items.push({
+                xtype: 'label',
+                text: 'Mode'
+            });
+
+            items.push({
+                xtype: 'combo',
+                store: Ext.create('Ext.data.ArrayStore', {
+                    fields: ['name'],
+                    data: availableModes
+                }),
+                queryMode: 'local',
+                displayField: 'name',
+                valueField: 'name',
+                listeners: {
+                    change: function (comp, newValue, oldValue) {
+                        var mode = newValue;
+
+                        if (newValue == 'rhtml') {
+                            mode = 'application/x-erb'
+                        }
+
+                        me.codeMirrorInstance.setOption('mode', mode);
+                        me.codeMirrorInstance.refresh();
+                    }
+                }
+            });
+        }
+
+        items.push({
+            text: 'Undo',
+            iconCls: 'icon-undo',
+            handler: function () {
+                this.codeMirrorInstance.undo();
+            },
+            scope: this
+        });
+
+        items.push({
+            text: 'Redo',
+            iconCls: 'icon-redo',
+            handler: function () {
+                this.codeMirrorInstance.redo();
+            },
+            scope: this
+        });
+
+        // line numbers button
+        if (me.showLineNumbers)
+            items.push({
+                cls: baseCSSPrefix + 'btn-icon',
+                iconCls: baseCSSPrefix + 'edit-insertorderedlist',
+                itemId: 'insertorderedlist',
+                tooltip: tipsEnabled ? 'Line Numbers' || undef : undef,
+                enableToggle: true,
+                handler: function () {
+                    me.enableLineNumbers = !me.enableLineNumbers;
+                    me.codeMirrorInstance.setOption('lineNumbers', me.enableLineNumbers);
+                }
+            });
+
+        if (!me.disableSave) {
+            items.push({
+                text: 'Save',
+                iconCls: 'icon-save',
+                handler: this.save,
+                scope: this
+            });
+        }
+
+        items = items.concat(me.tbarItems);
+
+        if (!me.disableToolbar) {
+            me.addDocked({
+                xtype: 'toolbar',
+                cls: Ext.baseCSSPrefix + 'html-editor-tb',
+                dock: 'top',
+                enableOverflow: true,
+                items: items
+            });
+
+            me.updateToolbarButtons();
+        }
+    },
+
+    updateToolbarButtons: function () {
+        var me = this;
+
+        try {
+            btns = me.getToolbar().items.map;
+            if (me.showLineNumbers) {
+                btns['insertorderedlist'].toggle(me.enableLineNumbers);
+            }
+        } catch (err) {
+
+        }
+    },
+
+    setupCodeMirror: function () {
+        var me = this,
+            mode = me.mode || null,
+            codeMirrorMode = null,
+            css = null,
+            textAreaComp = me.down('textarea'),
+            modeCombo = me.down('combo');
+
+        if (mode == 'rhtml') {
+            codeMirrorMode = 'application/x-erb'
+        }
+        else{
+            codeMirrorMode = mode;
+        }
+
+        this.initialConfig.codeMirrorConfig = Ext.apply({
+            foldGutter: me.enableCodeFolding,
+            matchBrackets: me.enableMatchBrackets,
+            electricChars: me.enableElectricChars,
+            indentUnit: me.indentUnit,
+            smartIndent: me.enableSmartIndent,
+            indentWithTabs: me.indentWithTabs,
+            pollInterval: me.pollInterval,
+            lineNumbers: me.enableLineNumbers,
+            lineWrapping: me.enableLineWrapping,
+            firstLineNumber: me.firstLineNumber,
+            tabSize: me.tabSize,
+            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+            fixedGutter: me.enableFixedGutter,
+            theme: me.theme,
+            mode: codeMirrorMode,
+            undoDepth: 5,
+            extraKeys: {
+                "Ctrl-S": function (instance) {
+                    me.fireEvent('save', me, me.getValue());
+                },
+                "Cmd-S": function (instance) {
+                    me.fireEvent('save', me, me.getValue());
+                }
+            },
+            showCursorWhenSelecting: true,
+            tabMode: "indent",
+            onChange: function () {
+                var code = self.codeMirrorInstance.getValue();
+                textAreaComp.setValue(code);
+            },
+            onKeyEvent: function (editor, event) {
+                event.cancelBubble = true; // fix suggested by koblass user on Sencha forums (http://www.sencha.com/forum/showthread.php?167047-Ext.ux.form.field.CodeMirror-for-Ext-4.x&p=862029&viewfull=1#post862029)
+                me.fireEvent('keyevent', me, event);
+            }
+        }, this.initialConfig.codeMirrorConfig);
+
+        me.codeMirrorInstance = CodeMirror.fromTextArea(textAreaComp.inputEl.dom, this.initialConfig.codeMirrorConfig);
+        me.codeMirrorInstance.setCursor(1);
+
+        // Enable Code Folding (Requires 'lineNumbers' to be set to 'true')
+        if (me.enableLineNumbers && me.enableCodeFolding) {
+            me.codeMirrorInstance.on("gutterClick", CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder));
+        }
+
+        if (me.showMode) {
+            // set value of mode combo
+            if (mode == null) {
+                modeCombo.setValue('text/plain');
+            }
+            else {
+                modeCombo.setValue(mode);
+            }
+        }
+
+        // change the codemirror css
+        css = Ext.util.CSS.getRule('.CodeMirror', true);
+        if (css) {
+            css.style.height = '100%';
+            css.style.overflow = 'hidden';
+        }
+        css = Ext.util.CSS.getRule('.CodeMirror-scroll', true);
+        if (css) {
+            css.style.height = '100%';
+        }
+
+        var tdElement = Ext.get(textAreaComp.inputEl.up('td', 1, true));
+        tdElement.setStyle('height', '100%');
+
+        me.codeMirrorInstance.refresh();
+    },
+
+    save: function () {
+        this.fireEvent('save', this, this.getValue());
+    },
+
+    setValue: function (value) {
+        this.codeMirrorInstance.setValue(value);
+    },
+
+    getValue: function () {
+        return this.codeMirrorInstance.getValue();
+    },
+
+    getCursor: function () {
+        return this.codeMirrorInstance.getCursor();
+    },
+
+    getSelection: function () {
+        return this.codeMirrorInstance.getSelection();
+    },
+
+    insertContent: function (value) {
+        this.codeMirrorInstance.replaceRange(value, this.codeMirrorInstance.getCursor());
+    },
+
+    focus: function(){
+        this.callParent();
+        this.codeMirrorInstance.focus();
+    }
+});