Improve the PanelwithUrlSelector.

The title of the selector can be defined in the python code.
The selector position can be top/bottom/left or right.

languages/fr-fr.py

@@ -77,6 +77,7 @@
 'Reports': 'Rapports',
 'Select': 'Selectionner',
 'select': 'select',
+'Select a project': 'Select a project',
 'select publication for a given year': 'selectionne les publication pour une année',
 'select publications for a given CPPM author': 'selectionne les publications pour un auteur du CPPM',
 'select publications for a given project': 'selectionne les publications pour un projet',

models/widgets_viewport.py

@@ -19,26 +19,28 @@ gridNode.add_children(db.tables, func=configurator)
 #
 # The helper node
 #
-versionNode = dbui.Panel(autoLoad=URL('plugin_dbui', 'versions'))
+versionLeaf = dbui.Panel(autoLoad=URL('plugin_dbui', 'versions'))
 
 helpNode = dbui.Node(T('Help'))
-helpNode.add_child(T('versions'), versionNode)
+helpNode.add_child(T('versions'), versionLeaf)
 
 #
 # the report node
 #
-node_1 = dbui.Panel(html="salut ma poule")
+leaf_1 = dbui.Panel(html="salut ma poule")
 
-node_2 = dbui.to_panelWithUrlSelector(virtdb.foo1, 
+leaf_2 = dbui.to_panelWithUrlSelector(virtdb.foo1, 
                                       baseUrl=URL('reports', 'report_2'))
 
-node_3 = dbui.to_panelWithUrlSelector(virtdb.harvester_selector, 
-                                      baseUrl=URL('reports', 'report_3'))
+leaf_3 = dbui.to_panelWithUrlSelector(virtdb.harvester_selector,
+                                      baseUrl=URL('reports', 'report_3'),
+                                      selectorRegion='north',
+                                      selectorTitle='Select a project')
 
 reportNode = dbui.Node(T('Reports'))
-reportNode.add_child(T('report_1'), node_1)
-reportNode.add_child(T('report_2'), node_2)
-reportNode.add_child(T('report_3'), node_3)
+reportNode.add_child(T('report_1'), leaf_1)
+reportNode.add_child(T('report_2'), leaf_2)
+reportNode.add_child(T('report_3'), leaf_3)
 
 #
 # The viewport with its navigation tree

modules/plugin_dbui/converter.py

@@ -589,7 +589,7 @@ def to_jsonstore(table, **kwargs):
     return cfg
 
 
-def to_panelWithUrlSelector(table, **kwargs):
+def to_panelWithUrlSelector(table, selectorTitle='Select', **kwargs):
     """Build the configuration for a simple PanelWithUrlSelector
     where the selector is a form derived from the database table.
 
@@ -597,6 +597,9 @@ def to_panelWithUrlSelector(table, **kwargs):
     Values are processed and results will be published in the panel.
     It is mandatory to specified the baseUrl.
         
+    The keyword argument selectoTitle define the title of the FieldSet
+    encapsulating the selector fields.
+    
     The others keyword arguments are the configuration parameters
     of the PanelWithUrlSelector. By default is_mathjax is False, 
     and panelCfg, selectorCfg, selectorCollapsible are defined.
@@ -609,7 +612,7 @@ def to_panelWithUrlSelector(table, **kwargs):
     fields = to_fields(table)
     selector = FieldSet(items=fields, 
                         plugins=['pFormToolTip'],
-                        title=current.T('Select'))
+                        title=current.T(selectorTitle))
 
     # build the configuration for the PanelWithUrlSelector
     default = dict(isMathJax=False,

static/plugin_dbui/CHANGELOG

 --------------------------------- CHANGE LOG ----------------------------------
 
 HEAD
-
+  - Improve PanelWithUrlSelector class (selectorTitle, selectorRegion)
+  
 0.4.9.7 (Nov 2012)
   - Major release with several improvements.
   - New syntax for grid filter via the method GridModifier.append_filter.

static/plugin_dbui/TODO

@@ -18,14 +18,16 @@
   - Review the plugin App.ViewportLogin.
     It should be possible to change the different text from the python model.
     
-  - Review the converter to_panelWithUrlSlector.
-    It should be possible to change the title of the FieldSet from 
-    the python model.
-    
   - Develop a new javascript widget to handle check list.
     It is similar to a combobox but each value has a check box in
     front of it. The order of the check fields can be modified using
     for example drag and drop technique.
     
+HEAD
+
+  - Review the converter to_panelWithUrlSlector.
+    It should be possible to change the title of the FieldSet from 
+    the python model.
+    
       
 0.4.9.7 (Nov 2012)    

static/plugin_dbui/src/basepanelwithselector.js

 /**
  *  A border layout with a panel and a selector.
  *  
- *  The selector is a collapsible panel appearing on the right side.
- *  It contains a set of Fields usually organized in field sets.
- *  By default the selector contains two buttons Go and Reset.
+ *  The selector is a collapsible panel appearing on the 
+ *  left/right/top/bottom side of the central panel. 
+ *  The selector contains a set of Fields usually organized in field sets.
+ *  and two buttons Go and Reset.
+ *  
+ *  The configuration parameter selectorRegion defined the position
+ *  of the selector with respect to the central panel. Value are those
+ *  of the border layout: east, west, south and north.
+ *  By default the selector is on the east side (right).
+ *  
+ *  The size of the selector is determined by selectorHeight and selectorWidth.
+ *  The former works when the selectorRegion is north and south while
+ *  the latter is for region west and east. 
  *  
  *  The logic between the panel, the selector and the buttons 
  *  is defined in inherited class.
@@ -24,11 +34,13 @@ App.BasePanelWithSelector = Ext.extend(Ext.Panel, {
     selectorCfg: null,
     
     /**
-     * configuration options for the panel and selector containers
+     * configuration options for the border layout
      */
     panelBorder: false,  
     selectorCollapsible: true,
     selectorFrame: true,
+    selectorHeight: 300,
+    selectorRegion: 'east',
     selectorSplit: true,
     selectorWidth: 300,
 
@@ -45,41 +57,49 @@ App.BasePanelWithSelector = Ext.extend(Ext.Panel, {
     constructor: function(config){
 
         var cfg,
+            itemPanel,
+            itemSelector,
             panel,
             selector;    
 
         Ext.apply(this, config);
 
+        // configure the panel item
         panel = Ext.ComponentMgr.create(this.panelCfg);
+        itemPanel = {
+            border: this.panelBorder,
+            layout: 'fit',
+            itemId: 'mainPanel',
+            items: [panel],
+            region: 'center'
+        };
+        
+        // configure the selector item
         selector = Ext.ComponentMgr.create(this.selectorCfg);
-
-        // predefined configuration of the panel
+        itemSelector = {
+            buttons: [{
+                ref: '../../goButton', 
+                text: this.textGo
+            }, {
+                ref: '../../resetButton', 
+                text: this.textReset
+            }],      
+            collapsible: this.selectorCollapsible,
+            defaults: {anchor: '99%'},
+            frame: this.selectorFrame,
+            height: this.selectorHeight,
+            layout: 'form',
+            itemId: 'selectorPanel',
+            items: [selector],
+            region: this.selectorRegion,
+            split: this.selectorSplit,
+            width: this.selectorWidth,
+        };
+        
+        // configure the border layout
         cfg = {
             layout: 'border',
-            items: [{
-                border: this.panelBorder,
-                layout: 'fit',
-                itemId: 'mainPanel',
-                items: [panel],
-                region: 'center',
-            }, {
-            	buttons: [{
-                    ref: '../../goButton', 
-                    text: this.textGo
-                }, {
-                    ref: '../../resetButton', 
-                    text: this.textReset
-                }],      
-                collapsible: this.selectorCollapsible,
-                defaults: {anchor: '99%'},
-                frame: this.selectorFrame,
-                layout: 'form',
-                itemId: 'selectorPanel',
-                items: [selector],
-                region: 'east',
-                split: this.selectorSplit,
-                width: this.selectorWidth,
-            }]
+            items: [itemPanel, itemSelector]
         };
 
         Ext.apply(this, cfg);