ExtJS 4.2: basic grid with row numbering is working.

models/widgets_grids.py

@@ -5,20 +5,20 @@
 #
 # add plugin to all grids
 #
-dbui.configure_grids(db, plugins=['pGridRowEditorConfirmDelete',
-                                  'pGridRowEditorContextMenu',
-                                  'pGridRowEditorDblClick',
-                                  'pGridExpertMenu'])
+# dbui.configure_grids(db, plugins=['pGridRowEditorConfirmDelete',
+#                                   'pGridRowEditorContextMenu',
+#                                   'pGridRowEditorDblClick',
+#                                   'pGridExpertMenu'])
 #
 # Polish categories grid
 #
 gridModifier = dbui.GridModifier('categories')
 gridModifier.configure_column('code', width=10)
-gridModifier.set_rownumbering()
+gridModifier.set_rownumbering(False)
 
-gridModifier.append_filter(('code', 'contains', T('bla bla...')))
-gridModifier.set_filters(plugins=['pFormToolTip'],
-                         width=300)
+# gridModifier.append_filter(('code', 'contains', T('bla bla...')))
+# gridModifier.set_filters(plugins=['pFormToolTip'],
+#                          width=300)
 
 #
 # Define a column template for the publications grid
@@ -48,7 +48,7 @@ tpl = ['<b>{PublicationsTitle}</b><br>',
        ]
 
 gridModifier = dbui.GridModifier('publications')
-gridModifier.append_plugins('pGridPaging', 'pGridExpertMenu', 'pGridMathJax')
+# gridModifier.append_plugins('pGridPaging', 'pGridExpertMenu', 'pGridMathJax')
 gridModifier.merge_columns('title', 
                            'authors', 
                            'id_collaborations', 
@@ -75,18 +75,16 @@ gridModifier.merge_columns('title',
 gridModifier.hide_columns('authors_cppm',
                           'e_print')
 
-gridModifier.set_rownumbering()
-
 #
 # Setup a filter panel for the publication grid
 #
 
-gridModifier.append_filter(('year', '==', T('select publication for a given year')))
-gridModifier.append_filter(('id_teams', '==', T('select publications for a given team')))
-gridModifier.append_filter(('id_projects', '==', T('select publications for a given project')))
-gridModifier.append_filter(('id_categories', '==', T('select publications with a given category code')))
-gridModifier.append_filter(('authors_cppm', 'contains', T('select publications for a given CPPM author')))
-gridModifier.append_filter(('countries.country', 'contains', T('blab blab ....')))
-
-gridModifier.set_filters(plugins=['pFormToolTip'],
-                         width=300)
+# gridModifier.append_filter(('year', '==', T('select publication for a given year')))
+# gridModifier.append_filter(('id_teams', '==', T('select publications for a given team')))
+# gridModifier.append_filter(('id_projects', '==', T('select publications for a given project')))
+# gridModifier.append_filter(('id_categories', '==', T('select publications with a given category code')))
+# gridModifier.append_filter(('authors_cppm', 'contains', T('select publications for a given CPPM author')))
+# gridModifier.append_filter(('countries.country', 'contains', T('blab blab ....')))
+# 
+# gridModifier.set_filters(plugins=['pFormToolTip'],
+#                          width=300)

modules/plugin_dbui/converter.py

@@ -8,6 +8,7 @@ import re
 
 from extjs import *
 from gluon import current
+from gridmodifier import ROW_NUMBERING
 from helper import (encode_field,
                     get_field_validators,
                     get_foreign_field,
@@ -16,6 +17,7 @@ from helper import (encode_field,
                     is_foreign_field,
                     is_set_field)
 from mapper import map_default
+from docutils.nodes import row
 
 # Associated gluon.dal.field type with an ExtJS widget
 # The dictionary contains configuration parameters of the Ext JS widget
@@ -420,7 +422,7 @@ def to_gridColumnModel(table):
     delete_columns = []
     template_columns = []
     tablename = table._tablename
-    row_numbering = False
+    row_numbering = ROW_NUMBERING
 
     # get modifier requirements
     modifier_grids = PluginManager('dbui').dbui.modifier_grids

modules/plugin_dbui/extjs.py

@@ -153,7 +153,7 @@ class GridPanel(Base):
 
 
 class GridRowNumberer(Base):
-    """Configurator for C{Ext.grid.RowNumberer}."""
+    """Configurator for C{Ext.grid.column.RowNumberer}."""
     xtype = 'rownumberer'
 
 

modules/plugin_dbui/gridmodifier.py

@@ -16,6 +16,9 @@ MSG_INVALID_KEYWORD = 'invalid keyword %s'
 MSG_POSITION_MISSING = 'keyword argument position is missing'
 MSG_TPL_MISSING = 'configuration option tpl is missing in extjs'
 
+# default behaviour for the row numbering
+ROW_NUMBERING = True
+
 
 def configure_grids(db, **extjs):
     """Apply to all grid widgets the same configuration options. 
@@ -85,7 +88,7 @@ class GridModifier(Modifier):
                                              extjs_filters=[], 
                                              extjs={})
             self.data.hidden_columns = []
-            self.data.row_numbering = False
+            self.data.row_numbering = ROW_NUMBERING
             self.data.template_columns = []
 
                    
@@ -250,9 +253,13 @@ class GridModifier(Modifier):
         self.data.grid_filters.extjs=kwargs
 
 
-    def set_rownumbering(self):
-        """Activate the row numbering.
-        Row number is displayed in the first column of the grid.
+    def set_rownumbering(self, bool=True):
+        """Activate or deactivate the row numbering.
+        Row number is displayed in the first column of the grid when activated.
+        
+        By default it is activate for all grids.
         
+        @type bool: boolean
+        @param bool: activate the row numbering when C{True}.
         """
-        self.data.row_numbering = True
+        self.data.row_numbering = bool

static/plugin_dbui/src/grid.js

 /**
- * The Grid class is the Ext.grid.GridPanel with the Ext.PagingToolbar.
- * Many functionality can be added through grid plugins like
+ * The Grid is an Ext.grid.Panel links to a database table.
+ *
+ * The store attribute is equal the table name when the widget is configured.
+ * It is replaced by the Ext.data.store.Direct associated to the database
+ * table in the initialization phase of the component.
+ *
+ * Many functionality can be added through plugins like the
  * App.grid.RowEditor, ....
  *
  */
@@ -24,27 +29,8 @@ Ext.define('App.grid.Grid', {
     // private attributes used by plugins
     rowEditor: null,
 
-    /**
-     * @constructor
-     *
-     * **Note:**
-     * Required in ExtJS 3.4 in order to convert the xtype *rownumberer*
-     * into an Ext.grid.RowNumberer. To be removed with ExtJS 4
-     *
-     */
-    constructor: function (config) {
-
-        "use strict";
-
-        var first_column = config.columns[0];
-
-        if (first_column.hasOwnProperty('xtype') && first_column.xtype === 'rownumberer') {
-            config.columns[0] = new Ext.grid.RowNumberer();
-        }
-
-        Ext.apply(this, config);
-        App.grid.Grid.superclass.constructor.call(this);
-    },
+    // predefined configuration options
+    forceFit: true,
 
     // private method requests by the component model of ExtJS
     initComponent: function () {
@@ -55,7 +41,7 @@ Ext.define('App.grid.Grid', {
         this.store = App.getStore(this.store);
 
         // empty toolBar requires by the plugins
-        this.bbar = new Ext.Toolbar();
+        this.bbar = [];
 
         // initialise the underlying class. DON'T MOVE
         App.grid.Grid.superclass.initComponent.call(this);
@@ -121,6 +107,7 @@ Ext.define('App.grid.Grid', {
         }
 
         // parameters defining the store load action
+        // ExtJS 4.2 use this.getDockItems('toolbar[dock="bottom"]');
         action = {callback: fireReset, scope: this};
         if (this.getBottomToolbar() instanceof Ext.PagingToolbar) {
             action.params = {start: 0, limit: this.nRows};

static/plugin_dbui/src/viewport.js

@@ -82,6 +82,7 @@ Ext.define('App.Viewport', {
                 xtype: 'treepanel'
             }, {
                 autoScroll: true,
+                bodyPadding: 1,
                 defaults: {layout: 'fit'},
                 enableTabScroll: true,
                 itemId: 'tabPanel',