Redesign the App.form.field.AceEditor using the Ext.form.FieldContainer.

static/plugin_dbui/src/form/field/AceEditor.js

@@ -3,13 +3,15 @@
  * [ACE editor](http://http://ace.c9.io/#nav=about)
  * It can be embedded in Ext.form.Panel.
  *
- * @experimental
  * @since 0.4.15.0
  *
  */
 Ext.define('App.form.field.AceEditor', {
 
-    extend: 'Ext.form.field.Base',
+    extend: 'Ext.form.FieldContainer',
+    mixins: {
+        field: 'Ext.form.field.Field'
+    },
     alias: 'widget.xaceeditorfield',
 
     /**
@@ -37,94 +39,78 @@ Ext.define('App.form.field.AceEditor', {
 
     // private property
     editor: null,
+    panel: null,
     valueBeforeRender: undefined,
 
     // private method requests by the component model of ExtJS
     initComponent: function (config) {
 
-        // Hack to get the size of the editor render properly
-        // The width is to small when it is not specified.
-        this.minWidth = this.minWidth || 258;
+        var me = this;
 
-        this.callParent(arguments);
-    },
+        me.items = [{
+            frame: true,
+            height: me.editorHeight,
+            xtype: 'panel'
+        }];
 
-    // private method requests by the component model of ExtJS
-    beforeDestroy: function () {
+        me.callParent(arguments);
+        me.panel = me.child('panel');
 
-        Ext.destroyMembers(this, 'editor');
+        me.panel.on('afterrender', me.addEditor, me);
 
-        this.callParent(arguments);
+        me.initField();
     },
 
-    /**
-     * Return the value of this field.
-     *
-     * @return {String}
-     *
-     */
-    getValue: function () {
+    // private method requests by the component model of ExtJS
+    beforeDestroy: function () {
 
-        "use strict";
+        var me = this;
 
-        if (this.editor) {
-            return this.editor.getValue();
-        }
+        me.panel.un('afterrender', me.addEditor, me);
 
-        return undefined;
-    },
+        me.editor.destroy();
+        Ext.destroyMembers(me, 'editor');
 
-    /**
-     * Render the editor field.
-     *
-     * @param {Ext.Element} ct The container to render to.
-     * @param {Object} position The position in the container to render to.
-     *
-     */
-    onRender: function (ct, position) {
-
-        this.callParent(arguments);
+        me.callParent(arguments);
+    },
 
-        // wrap an element around the input field
-        this.resizeEl = this.positionEl = this.wrap = this.bodyEl.wrap();
+    // private to embed the ace editor inside the panel
+    addEditor: function () {
 
-        // the editor require that the width an height are defined
-        this.wrap.setWidth(this.wrap.getWidth());
-        this.wrap.setHeight(this.editorHeight);
+        "use strict";
+        var me = this;
 
         // instantiate the editor
-        this.editor = ace.edit(this.wrap.id);
-        this.editor.getSession().setMode('ace/mode/' + this.language);
-        this.editor.setFontSize(this.fontSize);
+        me.editor = ace.edit(me.panel.getId());
+        me.editor.getSession().setMode('ace/mode/' + me.language);
+        me.editor.setFontSize(me.fontSize);
 
-        if (this.theme) {
-            this.editor.setTheme('ace/theme/' + this.theme);
+        if (me.theme) {
+            me.editor.setTheme('ace/theme/' + me.theme);
         }
 
         // load the value
-        this.editor.setValue(this.valueBeforeRender);
-        this.editor.clearSelection();
-        this.editor.moveCursorTo(0, 0);
-
-        // hide the default input field
-        this.bodyEl.setVisibilityMode(Ext.dom.Element.DISPLAY).hide();
+        me.editor.setValue(me.valueBeforeRender);
+        me.editor.clearSelection();
+        me.editor.moveCursorTo(0, 0);
     },
 
     /**
-     * Resize the component
+     * Return the value of this field.
      *
-     * @param {Number} w
-     * @param {Number} h
+     * @return {String}
      *
      */
-    onResize: function (w, h) {
+    getValue: function () {
+
+        "use strict";
+        var me = this;
 
-        this.wrap.setSize(w - this.getLabelWidth(), h);
-        if (this.editor) {
-            this.editor.resize();
+        if (me.editor) {
+            return me.editor.getValue();
         }
 
-        this.callParent(arguments);
+        return undefined;
     },
 
     /**
@@ -135,19 +121,24 @@ Ext.define('App.form.field.AceEditor', {
      */
     setValue: function (value) {
 
-        this.callParent(arguments);
+        "use strict";
+        var me = this;
 
-        if (this.editor) {
-            this.editor.setValue(value);
-            this.editor.clearSelection();
-            this.editor.moveCursorTo(0, 0);
+        if (me.editor) {
+            me.editor.setValue(value);
+            me.editor.clearSelection();
+            me.editor.moveCursorTo(0, 0);
 
-            this.valueBeforeRender = undefined;
+            me.valueBeforeRender = undefined;
 
         // Keep track of the value.
         // It will be used at the first rendering of the editor
         } else {
-            this.valueBeforeRender = value;
+            me.valueBeforeRender = value;
         }
+
+        // the standard way to set the value for a field
+        // extract from Ext.form.field.Base
+        return me.mixins.field.setValue.call(me, value);
     }
 });
\ No newline at end of file