Add the widget App.form.ListField.

models/widgets_fields.py

@@ -20,6 +20,8 @@ fieldsModifier.configure_field('dictionary', dictCfg={"string": "test",
                                                       "float": 0.01,
                                                       "date": "not implemented"})
 
+fieldsModifier.configure_field('list_string', xtype='xlistfield',)
+
 fieldsModifier.configure_field('python_code', height=120,
                                               xtype='xaceeditorfield',)
 

static/plugin_dbui/CHANGELOG

 --------------------------------- CHANGE LOG ----------------------------------
 
 HEAD
-  - New widget Ext.Form.DictField, Ext.form.AceEditorField
+  - New widget Ext.form.AceEditorField, Ext.Form.DictField, Ext.Form.ListField
 
 0.4.14.1 (Sep 2013)
   - The viewport can open a tab at startup.

static/plugin_dbui/src/fieldlist.js

+/**
+ * The ListField is an Ext.grid.GridPanel which is associated
+ * to a list field.
+ *
+ * The list can only contains string.
+ *
+ * NOTE: The Ext.form.SliderField is a good example to understand
+ * how to build the custom field.
+ *
+ * The type of this component is xlistfield.
+ *
+ * @extends Ext.form.Field
+ * @version
+ *
+ */
+Ext.namespace('App.form');
+
+/**
+ * @class App.form.ListField
+ *
+ */
+App.form.ListField = Ext.extend(Ext.form.Field, {
+
+    /**
+     * @cfg {boolean} autoHeight true by default
+     *
+     * @cfg {string} header
+     * label of the column display in the grid widget
+     *
+     * @cfg {boolean} hideHeader false by default
+     */
+    autoHeight: true,
+    header: 'Element',
+    hideHeader: false,
+
+    /**
+     * private attributes
+     */
+    grid: null,
+    menu: null,
+    rowIndex: undefined,
+
+    /**
+     * private attributes for internationalization
+     */
+    textAdd: 'Insert row',
+    textDestroy: 'Delete row',
+    textDestroytitle: 'Delete ...',
+    textDestroyMsg: 'Are you sure to destroy the row:',
+
+    /**
+     * private method requests by the component model of ExtJS
+     */
+    initComponent: function () {
+
+        "use strict";
+
+        var cm,
+            store;
+
+        // instantiate the local store
+        store = new Ext.data.ArrayStore({
+            fields: [{name: 'element'}],
+            data: [['one'], ['two'], ['three']]
+        });
+
+        // instantiate the column model
+        cm = new Ext.grid.ColumnModel([
+            {
+                header: this.header,
+                dataIndex: 'element',
+                id: 'element',
+                editable: true,
+                editor: new Ext.form.TextField(),
+                sortable: false
+            }
+        ]);
+
+        // instantiate the grid
+        this.grid = new Ext.grid.EditorGridPanel({
+            autoExpandColumn: 'element',
+            autoHeight: this.autoHeight,
+            hideHeaders: this.hideHeader,
+            clicksToEdit: 1,
+            colModel: cm,
+            store: store,
+            viewConfig: {
+                forcefit: true
+            }
+        });
+
+        // instantiate the context menu
+        this.menu = new Ext.menu.Menu();
+
+        this.menu.add({
+            text: this.textAdd,
+            iconCls: 'xaction-create',
+            itemId: 'itemInsert',
+            handler: this.onAddRow,
+            scope: this
+        }, '-', {
+            text: this.textDestroy,
+            iconCls: 'xaction-destroy',
+            itemId: 'itemDestroy',
+            handler: this.onDeleteRow,
+            scope: this
+        });
+
+        this.grid.on('contextmenu', this.onContextMenu, this);
+        this.grid.on('rowcontextmenu', this.onRowContextMenu, this);
+
+        App.form.ListField.superclass.initComponent.call(this);
+    },
+
+    /**
+     * private method requests by the component model of ExtJS
+     */
+    beforeDestroy: function () {
+
+        "use strict";
+
+        this.grid.un('contextmenu', this.onContextMenu, this);
+        this.grid.un('rowcontextmenu', this.onRowContextMenu, this);
+
+        Ext.destroyMembers(this, 'grid');
+        Ext.destroyMembers(this, 'menu');
+
+        App.form.ListField.superclass.beforeDestroy.call(this);
+    },
+
+    /**
+     * Return the value of this field
+     */
+    getValue: function () {
+
+        "use strict";
+
+        var i,
+            li = [],
+            records = this.grid.getStore().getRange();
+
+        for (i = 0; i < records.length; i += 1) {
+            li.push(records[i].data.element);
+        }
+
+        return li;
+    },
+
+    /**
+     * private handler to add a key
+     */
+    onAddRow: function () {
+
+        "use strict";
+
+        var record,
+            store = this.grid.getStore();
+
+        record = new store.recordType({element: ""});
+        store.insert(this.rowIndex + 1, record);
+    },
+
+    /**
+     * Private handler to inhibit context menu
+     * @param {Ext.EventObject} event
+     */
+    onContextMenu: function (event) {
+
+        "use strict";
+        event.stopEvent();
+
+        this.menu.getComponent('itemDestroy').disable();
+
+        this.rowIndex = -1;
+        this.menu.showAt(event.getXY());
+    },
+
+    /**
+     * private handler to delete a key
+     */
+    onDeleteRow: function () {
+
+        "use strict";
+
+        var msg,
+            record,
+            store;
+
+        store = this.grid.getStore();
+        record = store.getAt(this.rowIndex);
+
+        msg = this.textDestroyMsg + ' ' + record.get("element");
+
+        Ext.Msg.confirm(this.textDestroyTitle, msg, function (btn) {
+            if (btn === 'yes') {
+                store.remove(record);
+            }
+        });
+    },
+
+    /**
+     * private hanlder to render the grid super seeding he base class method
+     *
+     * @param {Ext.Element} ct The container to render to.
+     * @param {Object} position The position in the container to render to.
+     */
+    onRender: function (ct, position) {
+
+        "use strict";
+
+        // hide the default input field
+        this.autoCreate = {
+            id: this.id,
+            name: this.name,
+            type: 'hidden',
+            tag: 'input'
+        };
+
+        App.form.ListField.superclass.onRender.call(this, ct, position);
+
+        this.wrap = this.el.wrap({cls: 'x-form-field'});
+        this.wrap.setStyle('border', '1px solid');
+        this.wrap.setStyle('border-color', '#B5B8C8');
+
+        this.resizeEl = this.positionEl = this.wrap;
+        this.grid.render(this.wrap);
+    },
+
+    /**
+     * private handler to handle the row context menu
+     * @param {Ext.grid.PropertyGrid} grid
+     * @param {Number} rowIndex
+     * @param {Ext.EventObject} event
+     */
+    onRowContextMenu: function (grid, rowIndex, event) {
+
+        "use strict";
+
+        event.stopEvent();
+
+        this.menu.getComponent('itemDestroy').enable();
+
+        grid.getSelectionModel().select(rowIndex, 0);
+
+        this.rowIndex = rowIndex;
+        this.menu.showAt(event.getXY());
+    },
+
+    /**
+     * Set the value for this field
+     * @param {Object} value
+     */
+    setValue: function (value) {
+
+        "use strict";
+
+        var data = [],
+            i;
+
+        // convert the list in a list of list
+        // and replace the content of the store with the new data set
+        if (value && value instanceof Array) {
+            for (i = 0; i < value.length; i += 1) {
+                data.push([value[i]]);
+            }
+
+            this.grid.getStore().loadData(data, false);
+        }
+
+        return App.form.ListField.superclass.setValue.call(this, value);
+    }
+});
+
+Ext.reg('xlistfield', App.form.ListField);
\ No newline at end of file