Add the experimental version of the form field TextPicker.

static/plugin_dbui/CHANGELOG

@@ -9,7 +9,7 @@ HEAD
      a more complete preamble.
    - Consolidate by rebasing bugs fixed and improvements coming from
      the ongoing migration to Ext JS 5.1.
-   - Add the field App.form.field.DictMultiField.
+   - Add the field App.form.field.DictMultiField and App.form.field.TextPicker.
    - The field App.form.field.Dict fires the event keychange.
 
 0.6.1.14 (Dec 2014)

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

+/**
+ * Special field well suited for grid cell editing.
+ *
+ * It appears as a standard text field but behave as a TextArea.
+ * The latter is encapsulated in a pop up appearing when clicking
+ * on the text field.
+ *
+ * The value displayed in the text field is an ellipsis version of
+ * the content of the TextArea.
+ *
+ * @experimental
+ * @since 0.6.2.4
+ *
+ */
+Ext.define('App.form.field.TextPicker', {
+
+    extend: 'Ext.form.field.Picker',
+    alias: 'widget.xtextpicker',
+    uses: ['Ext.form.field.TextArea'],
+
+    /**
+     * @cfg {Number}
+     * The maximum length to allow before truncation and add an ellipsis
+     */
+    ellipsis: 10,
+
+    /**
+     * @cfg {Number}
+     * Initial number of rows displayed in the text area.
+     */
+    rows: 4,
+
+    // Predefined configuration options
+    editable: false,
+    hideTrigger: true,
+
+    /**
+     * Create and return the TextArea encapsulated in the picker.
+     *
+     * @return {Ext.form.field.TextArea}
+     *
+     */
+    createPicker: function() {
+
+        "use strict";
+
+        var me = this,
+            cfg,
+            picker;
+
+        cfg = {
+            floating: true,
+            rows: me.rows,
+            shadow: false,
+            xtype: 'textareafield'
+        };
+
+        picker = me.picker = Ext.widget(cfg);
+        return picker;
+    },
+
+    /**
+     * Handler execute when the picker is collapsed.
+     * It set up the value displayed in the text field from the
+     * content of the text area.
+     *
+     */
+    onCollapse: function() {
+
+        "use strict";
+
+        var me = this,
+            value;
+
+        value = me.picker.getValue();
+        me.setDisplayValue(value);
+    },
+
+    /**
+     * Return the content of the text area.
+     */
+    getValue: function() {
+
+        "use strict";
+        var me = this;
+
+        return me.getPicker().getValue();
+    },
+
+    // Set the value displayed in the text field.
+    // It it the ellipsis version of value, removing line break.
+    setDisplayValue: function(value) {
+
+        "use strict";
+        var me = this;
+
+        value = value.replace("\n", "");
+        value = Ext.String.ellipsis(value, me.ellipsis, true);
+
+        me.inputEl.dom.value = value;
+
+    },
+
+    /**
+     * Set the content of the text area and of the text field.
+     *
+     * @param {Object} value
+     */
+    setValue: function(value) {
+
+        "use strict";
+        var me = this;
+
+        if (value) {
+            me.getPicker().setValue(value);
+            me.setDisplayValue(value);
+        }
+
+        return me;
+    }
+});

static/scripts/picker.js

+/**
+ * picker.js
+ *
+ * Script to test picker field displaying a TextArea
+ *
+ */
+
+// Activate the dynamic loading for Ext JS and application classes
+App.setDynamicLoading(App.debug);
+
+// classes required by the script
+Ext.require('Ext.form.Panel');
+Ext.require('Ext.tip.QuickTipManager');
+Ext.require('App.form.field.TextPicker');
+
+Ext.onReady(function(){
+
+    "use strict";
+
+    var form;
+
+    Ext.QuickTips.init();
+
+    form = Ext.create('Ext.form.Panel', {
+        title: 'Dict',
+        bodyPadding: 5,
+        width: 350,
+        height: 450,
+        layout: 'anchor',
+        defaults: {
+            anchor: '100%'
+        },
+        items: [{
+            fieldLabel: 'MyText',
+            xtype: 'textfield'
+        }, {
+            fieldLabel: 'MyPicker',
+            xtype: 'xtextpicker'
+        }],
+        renderTo: Ext.getBody()
+    });
+
+});