Develop App.BasePanelWithSelector, App.PanelWithUrlSelector and modify

App.grid.GridWithFilter
 - Improve the display of App.GridWithFilter by moving anchor to 99%.
 - The class GridWithFilter inherit from PanelwithSelector
 - cvtSvc and cfg_configurable_url_panel follows evolution

controllers/reports.py

@@ -42,4 +42,10 @@ def report_2():
     """Return the url arguments
     
     """
-    return 'report_2: '+str(request.args)
\ No newline at end of file
+    
+    print request.post_vars
+    s = ""
+    for k in request.post_vars:
+        s += "<br>%s: %s" %  (k, request.post_vars[k])
+
+    return '<h3>report_2</h3>'+s
\ No newline at end of file

models/dummy.py

@@ -13,7 +13,7 @@ dummy = DAL(None)
 
 # the report node with selector
 dummy.define_table("foo1",
-    Field('my_string'),
-    Field('my_int', requires=IS_INT_IN_RANGE(0, 100)),
-    Field('my_date', requires=IS_DATE()),
+    Field('my_string', 'string'),
+    Field('my_int', 'integer', requires=IS_INT_IN_RANGE(0, 100)),
+    Field('my_date', 'date'),
     Field('my_list', requires=IS_IN_SET(['a', 'b', 'c'])))

models/plugin_dbui.py

@@ -37,6 +37,10 @@ directSvc.debug = session.debug
 def getForm(tablename): 
     return cvtSvc.to_form_panel(db[tablename])
 
+@directSvc.register
+def getGrid(tablename): 
+    return cvtSvc.to_grid_panel(db[tablename])
+
 @directSvc.register
 def getTree(node): 
     return cvtSvc.to_tree(node)

modules/plugin_dbui/cvtsvc.py

@@ -428,8 +428,8 @@ class CvtSvc(BaseSvc):
         # grid with filter
         filter = self.to_grid_filter(table)
         if filter:
-            cfg = {'filterCfg': filter,
-                   'gridCfg': dict(cfg),
+            cfg = {'panelCfg': dict(cfg),
+                   'selectorCfg': filter,
                    'xtype': 'xgridwithfilter'}
             
         return cfg

modules/plugin_dbui/navtree.py

@@ -21,21 +21,25 @@ def cfg_configurable_url_panel(key, value):
 
         value
             tuple containing a well form URL string 
-            and a gluon.dal.Table build the form allowing to setup
-            the URL arguments
+            and a list of configuration dictionary defining each items
+            embedded in the form.
             
     """
-    url, table = value
+    url, cfg_form_items = value
     
-    cfg = {'panelCfg': None,
+    cfg = {'baseUrl': url,
+           'panelCfg': None,
            'selectorCfg':None,
-           'xtype': 'xpanelwithselector'}
+           'xtype': 'xpanelwithurlselector'}
 
-    cfg['panelCfg'] = {'baseUrl': url,
-                       'plugins': ['pPanelMathJax'], 
-                       'preventBodyReset': True}
+    cfg['panelCfg'] = {'plugins': ['pPanelMathJax'], 
+                       'preventBodyReset': True,
+                       'xtype': 'panel'}
     
-    cfg['selectorCfg'] = {}
+    cfg['selectorCfg'] = {'defaults': {'anchor': '99%'},
+                          'items': cfg_form_items,
+                          'title': 'Configure',
+                          'xtype': 'fieldset'}
       
     return cfg
 

static/plugin_dbui/src/apppanelwithselector.js → static/plugin_dbui/src/appbasepanelwithselector.js

 /**
- *  A border layout with a panel and an url selector
+ *  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 logic between the panel, the selector and the buttons 
+ *  is defined in inherited class.
+ *  
  *  The type of this component is xpanelwithselector.
  *  
  *  @extend: Ext.Panel
  *  
  */
-Ext.namespace('App.panel');
+Ext.namespace('App');
 
-App.panel.PanelWithSelector = Ext.extend(Ext.Panel, {
+App.BasePanelWithSelector = Ext.extend(Ext.Panel, {
  
     /**
-     * @param {String} base url to be displayed in the panel
+     * @param {Object} panel and selector configurations
      */
     panelCfg: null,
     selectorCfg: null,
-    
+
     /**
      * Private attribute for internationalization
      */
     textGo: 'Go',
     textReset: 'Reset',
-  
+
     /**
      * constructor
      * @param {Object} config
      */
     constructor: function(config){
-    
-        var cfg;
-        
+
+        var cfg,
+            panel,
+            selector;    
+
+        Ext.apply(this, config);
+
+        panel = Ext.ComponentMgr.create(this.panelCfg);
+        selector = Ext.ComponentMgr.create(this.selectorCfg);
+
         // predefined configuration of the panel
         cfg = {
             layout: 'border',
             items: [{
-                autoScroll: true,
                 border: false,
-                defaults: {
-                    layout: 'fit'
-                },
-                itemId: 'urlPanel',
+                layout: 'fit',
+                itemId: 'mainPanel',
+                items: [panel],
                 region: 'center',
             }, {
-                autoScroll: true,
-                buttons: [{
+            	buttons: [{
                     ref: '../../goButton', 
                     text: this.textGo
                 }, {
                     ref: '../../resetButton', 
                     text: this.textReset
-                }],
+                }],      
                 collapsible: true,
+                defaults: {anchor: '99%'},
                 frame: true,
                 layout: 'form',
-                itemId: 'urlConfigurator',
+                itemId: 'selectorPanel',
+                items: [selector],
                 region: 'east',
                 split: true,
-                width: 200,
+                width: 300,
             }]
         };
-        
-        // apply user panel configuration
-        Ext.apply(cfg, config.panelCfg);
-        
-        // apply user selector cnonfiguration
-        Ext.apply(cfg, config.selectorCfg);
-        
-        // instanciate the panel
+
         Ext.apply(this, cfg);
-        App.panel.PanelWithSelector.superclass.constructor.call(this);
-        
-        // handlers
-        this.goButton.on('click', this.onGo, this);
-    },
-    
-    /**
-     * handle to build the URL and to load it in the panel
-     */
-    onGo: function() {
-        
-        var urlconfigurator = this.getComponent('urlConfigurator'),
-            urlPanel = this.getComponent('urlPanel');
-            
-        // buil the url
-        // load the url in the panel
-        console.log('onGo', this.baseUrl, urlPanel);
-        
-        urlPanel.load({
-            url: this.baseUrl,
-            text: 'Loading...',
-            timeout: 30 
-        });        
-        
         
+        // instanciate the panel
+        App.BasePanelWithSelector.superclass.constructor.call(this);
     }
 });
 
-Ext.reg('xpanelwithselector', App.panel.PanelWithSelector);
\ No newline at end of file
+Ext.reg('xpanelwithselector', App.BasePanelWithSelector);
\ No newline at end of file

static/plugin_dbui/src/appgridfilter.js

@@ -43,7 +43,7 @@ App.grid.GridFilter = Ext.extend(Ext.form.FieldSet, {
      * the enableKeyEvents is mandatory for Ext.form.TextField
      */
     defaults: {
-        anchor: '100%',
+        anchor: '99%',
         enableKeyEvents: true
     },
     

static/plugin_dbui/src/appgridwithfilter.js

@@ -7,67 +7,25 @@
  */
 Ext.namespace('App.grid');
 
-App.grid.GridWithFilter = Ext.extend(Ext.Panel, {
+App.grid.GridWithFilter = Ext.extend(App.BasePanelWithSelector, {
 
-    /**
-     * filter and grid configurations
-     */
-    filterCfg: null,
-    gridCfg: null,
-    
-    /**
-     * Private attribute for internationalization
-     */
-    textReset: 'Reset',
-    
-    /**
-     * constructor
-     * @param {Object} config
-     */
-    constructor: function(config) {
+    initComponent: function() {
 
-        var cfg,
-            filter,
+        var filter,
             grid;
 
-        Ext.apply(this, config);
-            
-        // instanciate the grid and it filte and grid
-        grid = Ext.ComponentMgr.create(this.gridCfg);
-        filter = Ext.ComponentMgr.create(this.filterCfg);
+        // collpase the grid filter panel
+        this.items[1].collapsed = true;
+        
+        App.grid.GridWithFilter.superclass.initComponent.call(this);
+
+        // bind the filter to the grid
+        filter = this.findByType('xgridfilter')[0];
+        grid = this.findByType('xgrid')[0];
         filter.bind(grid);
-                
-        // predefined configuration of the panel
-        cfg = {
-            border: false,
-            layout: 'border',
-            items: [{
-                items: [grid],
-                layout: 'fit',
-                region: 'center'
-            }, {
-                buttons: [{
-                    text: this.textReset,
-                    ref: '../../resetButton' 
-                }],
-                collapsible: true,
-                collapsed: true,
-                defaults: {anchor: '100%'},
-                frame: true,
-                items: [filter],
-                layout: 'form',
-                region: 'east',
-                split: true,
-                width: 300
-            }]
-        };
 
-        Ext.apply(this, cfg);
-        
-        // instanciate the panel
-        App.grid.GridWithFilter.superclass.constructor.call(this);
-        
-        // connect the reset button
+        // connect buttons
+        this.goButton.hide();
         this.resetButton.on('click', filter.onReset, filter);
     }
 });

static/plugin_dbui/src/apppanelwithurlselector.js

+/**
+ * A panel displaying an url content with an collpasible selector.
+ * the selector allow to setup the url parameters and to launch the
+ * request to the server.
+ * 
+ *  The type of this component is xpanelwithurlselector.
+ *  
+ * @extend: App.PanelWithSelector
+ * 
+ */
+Ext.namespace('App');
+
+App.PanelWithUrlSelector = Ext.extend(App.BasePanelWithSelector, {
+    
+    /**
+     * @param {String}
+     */
+    baseUrl: null,
+    
+    /**
+     * Require by the ExtJS model
+     */    
+    initComponent: function () {
+        
+        App.PanelWithUrlSelector.superclass.initComponent.call(this);
+        
+        // connect the buttons
+        this.goButton.on('click', this.onGo, this);
+        this.resetButton.on('click', this.onReset, this);
+    },
+
+    /**
+     * handle to build the URL and to load it in the panel
+     */
+    onGo: function() {
+        
+        var fields,
+            i,
+            panel = this.getComponent('mainPanel'),
+            params = {},
+            selector = this.getComponent('selectorPanel');
+            
+        fields = selector.findByType('field');
+        for (i = 0; i < fields.length; i += 1) {
+            params[fields[i].getName()] = fields[i].getValue();
+        }
+
+        panel.load({
+            url: this.baseUrl,
+            params: params,
+            text: 'Loading...',
+            timeout: 30 
+        });        
+    },
+
+    /**
+     * Handler to reset the selector
+     */
+    onReset: function () {
+        
+        var fields, 
+            i,
+            selector = this.getComponent('selectorPanel');
+
+        
+        fields = selector.findByType('field');
+        for (i = 0; i < fields.length; i += 1) {
+            fields[i].reset();
+        }
+    }
+});
+
+Ext.reg('xpanelwithurlselector', App.PanelWithUrlSelector);