Redesign the FilterBox as LinkedComboBox.

models/widgets_fields.py

@@ -28,15 +28,14 @@ fieldsModifier.merge_fields('conference_start',
 #
 fieldsModifier = dbui.FieldsModifier('foo1')
 fieldsModifier.configure_field('my_axis',
-                               displayField='axis',
-                               mode='local',
-                               store='axesStore',
-                               valueField='axis', 
-                               xtype='xfilterbox')
+                               master=True,
+                               masterField='axis',
+                               masterStore='axesStore',
+                               xtype='xlinkedcombobox')
 
 fieldsModifier.configure_field('my_granularity',
                                displayField='granularity',
                                mode='local',
                                store='axesStore',
                                valueField='granularity', 
-                               xtype='xfilterbox')
+                               xtype='xlinkedcombobox')

static/plugin_dbui/CHANGELOG

@@ -5,6 +5,7 @@ HEAD
   - Improve the files organization defining the model.
   - Enable tab scrolling in viewport.
   - Add the possibility to define static store (Ext.data.ArrayStore) in the model.
+  - Add a new widget LinkedComboBox.
   
 0.4.8.2 (Jul 2012)
   - Consolidation version

static/plugin_dbui/src/appfilterbox.js

-/**
- * combobox setup to filter the content of its local store
- * 
- * @extends Ext.form.ComboBox 
- *
- */
-Ext.namespace('App.form');
-
-App.form.FilterBox = Ext.extend(App.form.ComboBox, {
-    
-    /**
-     * private method require by the ExtJS component model
-     */	
-    initComponent: function () {
-
-        // construct the underlying class. DON'T MOVE
-        App.form.FilterBox.superclass.initComponent.call(this);
-
-        //logic to filter the content of the store to the combobox value
-        this.on('select', this.onChange, this);
-        
-    },
-
-    /**
-     * Handler to catch a change in field value anf to filter the store
-     */    
-    onChange: function (combo, record, index) {
-        this.store.filter(this.displayField, combo.getValue());
-    }
-});
-
-Ext.reg('xfilterbox', App.form.FilterBox);

static/plugin_dbui/src/applinkedcombobox.js

+/**
+ * Linked combobox has been designed to solve the case with two comboboxes
+ * where the values of the second one depend on the select value of the 
+ * first one.
+ * 
+ * The design is based on a master and a slave combobox which are 
+ * linked to a common store.
+ * 
+ * The master shows the values which are used to filter the common store.
+ * Values are unique and sorted in alphabetic order. It is enough to define 
+ * the properties master, masterField and masterStore to setup a master.
+ * 
+ * A slave is a standard combobox. The store identifier should be the same
+ * than the masterStore.
+ * 
+ * Several masters and slaves can be attached to a single store.
+ * 
+ * @extends Ext.form.ComboBox 
+ *
+ */
+Ext.namespace('App.form');
+
+App.form.LinkedComboBox = Ext.extend(Ext.form.ComboBox, {
+   
+    /**
+     * @cfg {Boolean] master true for a master combobox. default is false.
+     */ 
+    master: false,
+    
+    /**
+     * @cfg {String] masterField field of the common store display in the combobox
+     */ 
+    masterField: null,
+ 
+    /**
+     * @cfg {String] masterStore identifier of the store used by masters and slave
+     */ 
+    masterStore: null,
+    
+    /**
+     * private method require by the ExtJS component model
+     */	
+    initComponent: function () {
+
+
+        // configure a master combobox.
+        // create a local store containing the values which can be used 
+        // to filter the master store
+        if (this.master) {
+            
+            this.mode = 'local';
+            this.store = [];
+            this.masterStore = App.getStore(this.masterStore);
+            this.masterStore.each(this.fillData, this);
+            this.store.sort();
+            this.triggerAction = 'all';
+
+        // configure a slave combobox
+        } else {
+            
+            this.store = App.getStore(this.store);
+            this.triggerAction = 'all';
+        }
+
+        // construct the underlying class. DON'T MOVE
+        App.form.LinkedComboBox.superclass.initComponent.call(this);
+
+        // logic to filter the content of the master store
+        if (this.master) {
+            this.on('select', this.filterMasterStore, this);
+                
+        // logic to update the content of a slave
+        } else {
+            this.store.on('datachanged', this.onDataChanged, this);
+        }
+    },
+
+    /**
+     * Helper method to extract the master values to filter the common store.
+     * 
+     * @param {Ext.data.Record} record
+     */
+    fillData: function (record) {
+        var i,
+            value = record.get(this.masterField);
+
+        // initialise the list        
+        if (this.store.length === 0) {
+            this.store.push(value);
+            return;
+        } 
+        
+        // avoid duplicate entries
+        for (i = 0; i < this.store.length; i += 1) {
+            if (value === this.store[i]) {
+                return;
+            }
+        }
+        this.store.push(value);
+    },
+    
+    /**
+     * Helper method to filter the master store
+     * 
+     * @param {Ext.form.combobox} combo
+     * @param {Ext.data.Record} record
+     * @param {Integer} index
+     */
+    filterMasterStore: function (combo, record, index) {
+        this.masterStore.filter(this.masterField, combo.getValue());
+    },
+    
+    /**
+     * Helper method to update the combo box content and to select
+     * the first value of the filtered store
+     */
+    onDataChanged: function () {
+        var value = this.store.getAt(0).get(this.displayField);
+        this.setValue(value);
+    } 
+});
+
+Ext.reg('xlinkedcombobox', App.form.LinkedComboBox);