From 0dfcdd4cef15eb669b5d1a898f546c89806e0638 Mon Sep 17 00:00:00 2001
From: legac <renaud.legac@free.fr>
Date: Sat, 26 Oct 2013 12:03:35 +0200
Subject: [PATCH] The javascript documentation can be generated using JSDuck.

---
 .gitignore                                    |   2 +
 buildVersion.py                               |  81 ++++++++---
 controllers/plugin_dbui.py                    |   1 -
 modules/plugin_dbui/helper.py                 |   4 +-
 static/plugin_dbui/CHANGELOG                  |   1 +
 static/plugin_dbui/src/base.js                | 123 ++++++++++------
 .../plugin_dbui/src/basepanelwithselector.js  |  46 ++++--
 static/plugin_dbui/src/buttondownload.js      |  27 ++--
 static/plugin_dbui/src/combobox.js            |  18 +--
 static/plugin_dbui/src/fielddict.js           | 113 +++++++--------
 static/plugin_dbui/src/fieldeditor.js         |  48 +++----
 static/plugin_dbui/src/fieldlist.js           |  84 ++++++-----
 static/plugin_dbui/src/form.js                |  83 +++++------
 static/plugin_dbui/src/grid.js                |  55 +++----
 static/plugin_dbui/src/gridfilter.js          |  59 +++-----
 static/plugin_dbui/src/gridwithfilter.js      |  17 +--
 static/plugin_dbui/src/jsonstore.js           |  59 ++++----
 static/plugin_dbui/src/linkedcombobox.js      |  46 +++---
 .../plugin_dbui/src/panelwithurlselector.js   |  55 ++++---
 static/plugin_dbui/src/pformtooltip.js        |  24 ++--
 static/plugin_dbui/src/pgridexpertmenu.js     |  18 +--
 static/plugin_dbui/src/pgridmathjax.js        |  30 ++--
 static/plugin_dbui/src/pgridpaging.js         |  77 ++++++----
 static/plugin_dbui/src/pgridroweditorbase.js  | 136 +++++++++---------
 .../src/pgridroweditorconfirmdelete.js        |  22 +--
 .../src/pgridroweditorcontextmenu.js          |  66 +++++----
 .../plugin_dbui/src/pgridroweditordblclick.js |  30 ++--
 .../plugin_dbui/src/pgridroweditortoolbar.js  |  18 ++-
 static/plugin_dbui/src/ppanelmathjax.js       |  17 ++-
 static/plugin_dbui/src/pregexp.js             |  12 +-
 static/plugin_dbui/src/pviewportlogin.js      |  36 +++--
 static/plugin_dbui/src/viewport.js            |  39 +++--
 32 files changed, 723 insertions(+), 724 deletions(-)

diff --git a/.gitignore b/.gitignore
index d8c19c05..00e19239 100755
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@ cache/
 cron/
 databases/
 errors/
+httpserver.log
 private/
 sessions/
 static/plugin_ace/
@@ -13,6 +14,7 @@ static/plugin_dbui/dbui-debug.js
 static/plugin_dbui/dbui-min.js
 static/plugin_extjs/
 static/plugin_dbui/docs/epydoc
+static/plugin_dbui/docs/jsduck
 static/plugin_mathjax/
 uploads/
 web2py.plugin.dbui.*.w2p
diff --git a/buildVersion.py b/buildVersion.py
index 2cf792d3..95883b50 100755
--- a/buildVersion.py
+++ b/buildVersion.py
@@ -46,17 +46,18 @@ APP = os.path.basename(os.getcwd())
 CHANGELOG = 'static/plugin_dbui/CHANGELOG'
 DBUI_W2P = 'web2py.plugin.dbui.%s.w2p'
 JSBASE = 'static/plugin_dbui/src/base.js'
+JSDOC = 'static/plugin_dbui/docs/jsduck'
 JSLIBDEBUG = 'static/plugin_dbui/dbui-debug.js'
 JSLIBMIN = 'static/plugin_dbui/dbui-min.js'
 JSLIBSRC = 'static/plugin_dbui/src'
-HTMLDOC = 'static/plugin_dbui/docs/epydoc'
+PYDOC = 'static/plugin_dbui/docs/epydoc'
 
 NOW = datetime.datetime.now()
 PACK_PLUGIN_URL = 'http://localhost:8000/%s/default/pack_plugin' % APP
 
 # basic commands
 GIT = '/usr/bin/git'
-YUICOMPRESSOR = os.path.expandvars("$HOME/lib/yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar")
+YUICOMPRESSOR = os.path.expandvars("$HOME/lib/yuicompressor-2.4.8.jar")
 
 
 def clean():
@@ -73,26 +74,30 @@ def clean():
 
 def epydoc():
     """Generate the epydoc documentation
-    The HTML files are located in static/plugin_dbui/docs/
+    The HTML files are located in static/plugin_dbui/docs/epydoc
     
     """
     # create the directory
-    if not os.path.exists(HTMLDOC):
-        os.makedirs(HTMLDOC)
+    if not os.path.exists(PYDOC):
+        os.makedirs(PYDOC)
     
     # inhibit the __init__.py files
     # to avoid long modules path in the documentation
-    os.rename("__init__.py", "__init__.py.ref")
-    os.rename("modules/__init__.py", "modules/__init__.py.ref")
+    if os.path.exists("__init__.py"):
+        os.rename("__init__.py", "__init__.py.ref")
+    
+    if os.path.exists("modules/__init__.py"):
+        os.rename("modules/__init__.py", "modules/__init__.py.ref")
     
     # clean the directory
-    for el in os.listdir(HTMLDOC):
-        os.remove(os.path.join(HTMLDOC, el))
+    cmd = ["rm", "-rf", PYDOC]
+    subprocess.call(cmd)
 
+    # run epydoc
     cmd = ["epydoc", "--docformat", "epytext",
                      "--html",
                      "--name", "plugin_dbui",
-                     "-o", HTMLDOC,
+                     "-o", PYDOC,
                      "--parse-only",
                      "-v",
                      "modules/plugin_dbui/*.py"]
@@ -100,17 +105,21 @@ def epydoc():
     subprocess.call(cmd)
 
     # restore the __init__.py files
-    os.rename("__init__.py.ref", "__init__.py")
-    os.rename("modules/__init__.py.ref", "modules/__init__.py")
+    if os.path.exists("__init__.py.ref"):
+        os.rename("__init__.py.ref", "__init__.py")
+
+    if os.path.exists("modules/__init__.py.ref"):
+        os.rename("modules/__init__.py.ref", "modules/__init__.py")
+
+    print "HTML documentation in", PYDOC
+
 
-    print "HTML documentation in", HTMLDOC
-    
 def get_version():
     """Get the current version identifier.
     
     """
     s = open(JSBASE, 'rb').read()
-    m = re.match("(.+App.version = ')([\w._-]*)(';.*)", s, re.DOTALL)
+    m = re.match("(.+    version: ')([\w._-]*)('.+)", s, re.DOTALL)
     return m.group(2)
 
 
@@ -146,6 +155,26 @@ def git():
     subprocess.call(cmd)
 
 
+def jsduck():
+    """Generate the JavaScript documentation.
+    The HTML files are located in static/plugin_dbui/docs/jsduck
+    
+    """
+    # create the directory
+    if not os.path.exists(JSDOC):
+        os.makedirs(JSDOC)
+
+    # clean the directory
+    cmd = ["rm", "-rf", JSDOC]
+    subprocess.call(cmd)
+
+    # run JsDuck
+    cmd = ["jsduck", JSLIBSRC, "--output", JSDOC, "--title", "plugin_dbui"]
+    subprocess.call(cmd)
+
+    print "JavaScript documentation in", JSDOC
+
+
 def set_version(version):
     """Set version identifier in CHANGELOG and appbase.js
     
@@ -155,7 +184,7 @@ def set_version(version):
     
     # look for a pattern App.version = '0.8.3'; in appbase.js
     # split the the string in 3 parts (pre, version, post)
-    m = re.match("(.+App.version = ')([\w._-]*)(';.*)", s, re.DOTALL)
+    m = re.match("(.+    version: ')([\w._-]*)('.+)", s, re.DOTALL)
     
     if m.group(2) == version:
         print '\n\tVersion "%s" already exists in the appbase.js file !' % version
@@ -254,6 +283,11 @@ if __name__ == '__main__':
                    dest= "git",
                    help= "commit and tag the current release.")
 
+    ops.add_option("-j", "--jsduck",
+                   action="store_true",
+                   dest= "jsduck",
+                   help= "generate the JavaScript documentation.")
+
     ops.add_option("-r", "--release",
                    action="store_true",
                    dest= "get",
@@ -279,6 +313,7 @@ if __name__ == '__main__':
                      epydoc=False,
                      get=False,
                      git=False,
+                     jsduck=False,
                      set=False,
                      yuicompressor=False,
                      web2py=False)
@@ -286,10 +321,9 @@ if __name__ == '__main__':
     (opt, args) = ops.parse_args()
     
     # the version of the current release
-    if opt.get:
+    if opt.get or opt.all:
         version = get_version()
         print "\nThe version of the current release is %s\n" % version
-        sys.exit(0)
         
     # run all steps
     if opt.all:
@@ -297,6 +331,7 @@ if __name__ == '__main__':
         opt.set = True
         opt.epydoc = True
         opt.git = True
+        opt.jsduck = True
         opt.yuicompressor = True
         opt.web2py = True
 
@@ -305,7 +340,6 @@ if __name__ == '__main__':
         
     if opt.clean:
         clean()
-        sys.exit(0)
     
     if opt.set:
         if args:
@@ -318,12 +352,15 @@ if __name__ == '__main__':
     
     if opt.epydoc:
         epydoc()
+
+    if opt.jsduck:
+        jsduck()
         
-    if opt.yuicompressor: 
-        yuicompressor()
-    
     if opt.git: 
         git()
+
+    if opt.yuicompressor: 
+        yuicompressor()
     
     if opt.web2py: 
         web2py()
diff --git a/controllers/plugin_dbui.py b/controllers/plugin_dbui.py
index 33671cc9..81d88dda 100644
--- a/controllers/plugin_dbui.py
+++ b/controllers/plugin_dbui.py
@@ -14,7 +14,6 @@ import os
 
 
 API = """
-Ext.namespace('App');
 App.csvUrl = '/%s/plugin_dbui/csv';
 App.name = '%s';
 App.REMOTE_API = {
diff --git a/modules/plugin_dbui/helper.py b/modules/plugin_dbui/helper.py
index 9aa5e1dc..f58a8cff 100644
--- a/modules/plugin_dbui/helper.py
+++ b/modules/plugin_dbui/helper.py
@@ -564,8 +564,8 @@ def get_versions():
     s = fi.read()
     fi.close()
     
-    m = re.match(".+App.version = '([\w._-]*)';.*", s, re.DOTALL)
-    dbui = m.group(1)
+    m = re.match("(.+    version: ')([\w._-]*)('.+)", s, re.DOTALL)
+    dbui = m.group(2)
 
     # plugin extjs
     extjs = current.T('plugin not install')
diff --git a/static/plugin_dbui/CHANGELOG b/static/plugin_dbui/CHANGELOG
index 259d03e3..400bf335 100644
--- a/static/plugin_dbui/CHANGELOG
+++ b/static/plugin_dbui/CHANGELOG
@@ -5,6 +5,7 @@ HEAD
 0.4.15.0 (Oct 2013)
   - New experimental widgets Ext.form.AceEditorField, Ext.Form.DictField
     and Ext.Form.ListField
+  - Javascript documentation can be produced using JSDuck.
 
 0.4.14.1 (Sep 2013)
   - The viewport can open a tab at startup.
diff --git a/static/plugin_dbui/src/base.js b/static/plugin_dbui/src/base.js
index 2290de0e..815cc978 100644
--- a/static/plugin_dbui/src/base.js
+++ b/static/plugin_dbui/src/base.js
@@ -1,32 +1,67 @@
 /**
- * appbase.js
- *
- * Constants and elementary functions to built an application
- *
- */
-Ext.namespace('App');
-
-/**
- * @cfg {String} App.name
- * Name of the web application.
- * This constants is defined by the server.
- */
-
-/**
- * @cfg {Array} App.storeCfgs
- * Configuration option for all json stores
- */
-
-/**
- * @param {String} App.version version of the library
+ * @class App
+ * Core utilities and functions.
+ * @singleton
  */
-App.version = '0.4.15.0';
+App = {
+    /**
+     * The version of the plugin
+     * @property {String}
+     */
+    version: '0.4.15.0',
+
+    /**
+     * The name of the application
+     * @property {String}
+     */
+    name: undefined,
+
+    /**
+     * The JSON stores configuration.
+     * @property {Object}
+     * The attributes are the *storeId*.
+     * There is one for each database table.
+     * The storeId is usually encoded as *tablenameStore*.
+     */
+    storeCfgs: null,
+
+    /**
+     * The configuration of the App.Viewport
+     * @property {Object}
+     */
+    viewportCfg: null,
+
+    /**
+     * The configuration of the Ext.Direct service.
+     * It contains the definition of the remote procedure.
+     * @property {Object} REMOTE_API
+     * @property {String} REMOTE_API.url
+     * The well-formed URL for the call method running on the server side:
+     *
+     *     /myapplication/plugin_dbui/call
+     *
+     * @property {String} REMOTE_API.type="remoting"
+     *
+     * @property {Object} REMOTE_API.actions
+     * The registered actions are encoded:
+     *
+     *     Dbui.methodName
+     *
+     * Each action has the following properties:
+     * @property {String} REMOTE_API.actions.method
+     * @property {Number} REMOTE_API.actions.len
+     */
+    REMOTE_API: null
+};
 
 /**
- * Helper function mimicking the encode_field function running on the server
- * (table, field) → TableField
+ * Mimic the encode_field function running on the server.
+ * It encodes the pair (table, field) as TableField.
+ *
  * @param {String} table
  * @param {String} field
+ *
+ * @return {String} The input arguments encoded as TableField.
  */
 App.encodeField = function (table, field) {
     "use strict";
@@ -37,10 +72,10 @@ App.encodeField = function (table, field) {
 };
 
 /**
- * Helper function to close the user session on the server.
- * Can be triggered by the window beforeunload event.
+ * Close the user session on the server.
+ * Can be triggered by the window event *beforeunload*.
  *
- * @param {Event} event
+ * @param {Ext.EventObject} event
  */
 App.closeUserSession = function (event) {
     "use strict";
@@ -49,18 +84,20 @@ App.closeUserSession = function (event) {
 };
 
 /**
- * Helper function returning an App.data.Store identifies by its id.
+ * Return the App.data.Store identifies by its id.
  * If the store does not exit it is created and register in the store manager.
  *
- * NOTE: The storeId is defined by the server.
- * The syntax of the storeId is "nameStore".
- * If the store does not exist, its configuration is extract from
- * the application constant App.storeCfgs.Then it is created and registered.
+ * **Note:** The storeId is defined by the server.
+ * The syntax of the storeId is *nameStore* where *name* corresponds
+ * to a database table.
+ * The store configuration is extract from the array App#storeCfgs.
  *
- * In the current frame work, this function allows to associated a unique store
- * to a database table and that widget share the same store.
+ * In the current framework, this function associates a unique store
+ * to a database table. Therefore it can be shared by different widgets.
  *
  * @param {String} storeId
+ *
+ * @return {Ext.data.Store}
  */
 App.getStore = function (storeId) {
 
@@ -112,10 +149,11 @@ App.getStore = function (storeId) {
 };
 
 /**
- * Helper function returning the name of the database table
- * associated to the store. works with store configured using the
- * Dbui.getJsonStore method.
+ * Return the name of the database table associated to the store.
+ *
  * @param {App.data.DirectStore} store
+ *
+ * @return {String}
  */
 App.getTableName = function (store) {
     "use strict";
@@ -123,10 +161,12 @@ App.getTableName = function (store) {
 };
 
 /**
- * Helper function to determine if a plugin is present
- * in the plugins list of a component
- * @param {Ext.Component}
- * @param {String} ptype the ptype of the plugin
+ * Determine if a plugin is present in the plugins list of a component.
+ *
+ * @param {Ext.Component} component
+ * @param {String} ptype The ptype of the plugin.
+ *
+ * @return {Boolean}
  */
 App.isPlugin = function (component, ptype) {
 
@@ -153,3 +193,6 @@ App.isPlugin = function (component, ptype) {
     }
     return false;
 };
+
+// Define name spaces for the remaining class.
+Ext.ns("App.data", "App.form", "App.grid", "App.panel");
diff --git a/static/plugin_dbui/src/basepanelwithselector.js b/static/plugin_dbui/src/basepanelwithselector.js
index a5db6db4..079bcdc0 100644
--- a/static/plugin_dbui/src/basepanelwithselector.js
+++ b/static/plugin_dbui/src/basepanelwithselector.js
@@ -18,40 +18,66 @@
  *  The logic between the panel, the selector and the buttons
  *  is defined in inherited class.
  *
- *  The type of this component is xpanelwithselector.
- *
+ *  @class App.BasePanelWithSelector
  *  @extend: Ext.Panel
+ *  @xtype xpanelwithselector
  *
  */
-Ext.namespace('App');
-
 App.BasePanelWithSelector = Ext.extend(Ext.Panel, {
 
     /**
-     * @param {Object} panel and selector configurations
+     * @cfg {Object} panelCfg The panel configuration
      */
     panelCfg: null,
-    selectorCfg: null,
 
     /**
-     * configuration options for the border layout
+     * @cfg {Boolean} panelBorder
      */
     panelBorder: false,
+
+    /**
+     * @cfg {Object} selectorCfg
+     * The configuration of the items encapsulated in the selector.
+     */
+    selectorCfg: null,
+
+    /**
+     * @cfg {Boolean} selectorCollapsible
+     */
     selectorCollapsible: true,
+
+    /**
+     * @cfg {Boolean} selectorFrame
+     */
     selectorFrame: true,
+
+    /**
+     * @cfg {Number} selectorHeight
+     */
     selectorHeight: 300,
+
+    /**
+     * @cfg {String} selectorRegion
+     * Authorized values are east, west, south and north.
+     */
     selectorRegion: 'east',
+
+    /**
+     * @cfg {Boolean} selectorSplit
+     */
     selectorSplit: true,
-    selectorWidth: 300,
 
     /**
-     * Private attribute for internationalization
+     * @cfg {Number} selectorWidth
      */
+    selectorWidth: 300,
+
+    // Private attribute for internationalization
     textGo: 'Go',
     textReset: 'Reset',
 
     /**
-     * constructor
+     * @constructor
      * @param {Object} config
      */
     constructor: function(config) {
diff --git a/static/plugin_dbui/src/buttondownload.js b/static/plugin_dbui/src/buttondownload.js
index 73debf4c..f4970ec1 100644
--- a/static/plugin_dbui/src/buttondownload.js
+++ b/static/plugin_dbui/src/buttondownload.js
@@ -1,24 +1,20 @@
 /**
- * A button to download file from the server
+ * A button to download a file from the server
  *
+ * @class App.ButtonDownload
  * @extends Ext.Button
- * @version
+ * @xtype xbuttondownload
  *
  */
-
-Ext.namespace('App');
-
 App.ButtonDownload = Ext.extend(Ext.Button, {
 
     /**
-     * @cfg{String} url  pointing to the server controller
-     * which will return the file
+     * @cfg{String} url
+     * The URL of the server controller returning the file.
      */
     url: undefined,
 
-     /**
-      * private method requests by the component model of ExtJS
-      */
+     // private method requests by the component model of ExtJS
     initComponent: function () {
 
         "use strict";
@@ -34,12 +30,15 @@ App.ButtonDownload = Ext.extend(Ext.Button, {
      * Handler to download the file
      * The scope is the button.
      *
-     * NOTE: this method add and iframe at the end of the DOM document
-     * the source of the iframe is the url pointing on the server conroller.
+     * **Note:** the method add and iframe at the end of the DOM document
+     * the source of the iframe is the URL pointing to the server controller.
      * The latter return a document which is automatically loaded.
      *
-     * Method suggested on the sencha forum:
-     * www.sencha.com/forum/showthread.php?26471-Download-File-on%28-click-%29
+     * Method suggested on the
+     * [sencha forum](http://www.sencha.com/forum/showthread.php?26471-Download-File-on%28-click-%29).
+     *
+     * @param {Ext.Button} button
+     * @param {Ext.EventObject} event
      */
     onDownload: function (button, event) {
 
diff --git a/static/plugin_dbui/src/combobox.js b/static/plugin_dbui/src/combobox.js
index c3e5f0f3..3e0063f2 100644
--- a/static/plugin_dbui/src/combobox.js
+++ b/static/plugin_dbui/src/combobox.js
@@ -1,29 +1,21 @@
 /**
- * The ComboBox is an Ext.form.ComboBox with an App.data.DirectStore.
- *
- * The type of this component is xcombobox.
+ * The ComboBox is an Ext.form.ComboBox linked to an App.data.DirectStore.
  *
+ * @class App.form.ComboBox
  * @extends Ext.form.ComboBox
- * @version
+ * @xtype xcombobox
  *
  */
-Ext.namespace('App.form');
-
 App.form.ComboBox = Ext.extend(Ext.form.ComboBox, {
 
-    /**
-     * Predefined setting
-     *
-     */
+    // Predefined setting
     mode: 'remote',
     editable: false,
     selectOnFocus: true,
     triggerAction: 'all',
     typeAhead: true,
 
-    /**
-     * private method require by the ExtJs component model
-     */
+    // private method require by the ExtJs component model
     initComponent: function () {
 
         "use strict";
diff --git a/static/plugin_dbui/src/fielddict.js b/static/plugin_dbui/src/fielddict.js
index 07e02284..8b7098c1 100644
--- a/static/plugin_dbui/src/fielddict.js
+++ b/static/plugin_dbui/src/fielddict.js
@@ -1,27 +1,6 @@
-/**
- * The DictField is an Ext.grid.PropertyGrid which is associated
- * to a JSON field.
- *
- * The JSON object is a dictionary. It can only contains boolean,
- * date, float and string objects.
- *
- * The default structure of the dictionary can be defined via
- * the property dictCfg. It is possible to add / delete key value pairs.
- *
- * NOTE: The Ext.form.SliderField is a good example to understand
- * how to build the custom field.
- *
- * The type of this component is xdictfield.
- *
- * @extends Ext.form.Field
- * @version
- *
- */
-Ext.namespace('App.form');
-
 /**
  * Extend the default type for Ext.grid.column in order to render JSON object.
- * The new type can be access using xtype = jsoncolumn in the column mdel.
+ * The new type can be access using xtype = jsoncolumn in the column model.
  *
  */
 Ext.grid.JsonColumn = Ext.extend(Ext.grid.Column, {
@@ -38,60 +17,71 @@ Ext.grid.JsonColumn = Ext.extend(Ext.grid.Column, {
 Ext.grid.Column.types.jsoncolumn = Ext.grid.JsonColumn;
 
 /**
+ * The DictField widget is an Ext.grid.PropertyGrid which is associated
+ * to a JSON database field. It can be embedded in Ext.form.FormPanel.
+ *
+ * The JSON object is a dictionary. It can only contains boolean,
+ * date, float and string objects.
+ *
+ * The default structure of the dictionary can be defined via
+ * the property dictCfg. It is possible to add / delete key value pairs.
+ *
  * @class App.form.DictField
+ * @extends Ext.form.Field
+ * @xtype xdictfield
+ *
+ * @experimental
+ * @since 0.4.15.0
  *
  */
 App.form.DictField = Ext.extend(Ext.form.Field, {
 
     /**
-     * @cfg {boolean} autoHeight true by default
+     * @cfg {Boolean} autoHeight
      *
      */
     autoHeight: false,
 
     /**
-     * @cfg {object} dictCfg default configuration for the dictionary
-     * Example:
-     * {
-     *   "(name)": "My Object",
-     *   "Created": new Date(Date.parse('10/15/2006')),
-     *   "Available": false,
-     *   "Version": .01,
-     *   "Description": "A test object"
-     * }
+     * @cfg {Object} dictCfg default configuration for the dictionary.
+     *
+     *     {
+     *         "(name)": "My Object",
+     *         "Created": new Date(Date.parse('10/15/2006')),
+     *         "Available": false,
+     *         "Version": .01,
+     *         "Description": "A test object"
+     *     }
+     *
      */
     dictCfg: {},
 
     /**
-     * @cfg {array} headers
-     * label of the column display in the grid widget
+     * @cfg {Array} headers
+     * label of the column display in the grid widget.
      */
     headers: null,
 
     /**
-     * @cfg {number} height
+     * @cfg {Number} height
      */
     /**
-     * @cfg {boolean} hideHeader false by default
+     * @cfg {Boolean} hideHeader
      */
     hideHeader: false,
 
     /**
-     * @cfg {boolean} modifyKeys Dictionary keys can be added or deleted.
-     * By default false.
+     * @cfg {Boolean} modifyKeys
+     * Dictionary keys can be added or deleted when true.
      */
     modifyKeys: false,
 
-    /**
-     * private attributes
-     */
+    // private properties
     grid: null,
     menu: null,
     rowIndex: undefined,
 
-    /**
-     * private attributes for internationalization
-     */
+    // private attributes for internationalization
     textAdd: 'Add',
     textAddTitle: 'Add ...',
     textAddMsg: 'Please enter the new key:',
@@ -104,9 +94,7 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
     textUpdateTitle: 'Update ...',
     textUpdateMsg: 'Modify the key:',
 
-    /**
-     * private method requests by the component model of ExtJS
-     */
+    // private method requests by the component model of ExtJS
     initComponent: function () {
 
         "use strict";
@@ -168,9 +156,7 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
         App.form.DictField.superclass.initComponent.call(this);
     },
 
-    /**
-     * private method requests by the component model of ExtJS
-     */
+    // private method requests by the component model of ExtJS
     beforeDestroy: function () {
 
         "use strict";
@@ -188,7 +174,10 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * Return the value of this field
+     * Return the value of this field.
+     *
+     * @return {Object} the content of the dictionary.
+     *
      */
     getValue: function () {
 
@@ -197,7 +186,7 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private handler to add a key
+     * Add a key to the dictionary.
      */
     onAddKey: function () {
 
@@ -224,8 +213,10 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * Private handler to inhibit context menu
+     * Show the context menu to modify key.
+     *
      * @param {Ext.EventObject} event
+     *
      */
     onContextMenu: function (event) {
 
@@ -239,7 +230,7 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private handler to delete a key
+     * Delete a key of the dictionary.
      */
     onDeleteKey: function () {
 
@@ -261,10 +252,11 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private hanlder to render the grid super seeding he base class method
+     * Render the widget.
      *
      * @param {Ext.Element} ct The container to render to.
      * @param {Object} position The position in the container to render to.
+     *
      */
     onRender: function (ct, position) {
 
@@ -291,10 +283,12 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private handler to handle the row context menu
+     * Show the row context menu to modify keys.
+     *
      * @param {Ext.grid.PropertyGrid} grid
      * @param {Number} rowIndex
      * @param {Ext.EventObject} event
+     *
      */
     onRowContextMenu: function (grid, rowIndex, event) {
 
@@ -306,7 +300,7 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private handler to update a key
+     * Update a key.
      */
     onUpdateKey: function () {
 
@@ -339,8 +333,11 @@ App.form.DictField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * Set the value for this field
+     * Set the value for the dictionary.
+     *
      * @param {Object} value
+     * A key, value object which is loaded in the dictioanry.
+     *
      */
     setValue: function (value) {
 
diff --git a/static/plugin_dbui/src/fieldeditor.js b/static/plugin_dbui/src/fieldeditor.js
index 69bb639a..59f8cfb6 100644
--- a/static/plugin_dbui/src/fieldeditor.js
+++ b/static/plugin_dbui/src/fieldeditor.js
@@ -1,47 +1,37 @@
 /**
- * The AceEditorField is a wrapping of the ACE editor
- * (http://http://ace.c9.io/#nav=about)
- *
- * NOTE: The Ext.form.SliderField is a good example to understand
- * how to build the custom field.
- *
- * The type of this component is xaceeditorfield.
+ * The AceEditorField is a wrapping of the
+ * [ACE editor](http://http://ace.c9.io/#nav=about)
+ * It can be embedded in Ext.form.FormPanel.
  *
+ * @class App.form.AceEditorField
  * @extends Ext.form.Field
- * @version
+ * @xtype xaceeditorfield
  *
- */
-Ext.namespace('App.form');
-
-/**
- * @class App.form.AceEditorField
+ * @experimental
+ * @since 0.4.15.0
  *
  */
 App.form.AceEditorField = Ext.extend(Ext.form.Field, {
 
     /**
-     * @cfg {integer} fontSize the font size in pixels
+     * @cfg {Number} fontSize The font size in pixels
      */
     fontSize: 10,
 
     /**
-     * @cfg {string} language the programming language javascript, python, ....
+     * @cfg {String} language The programming language javascript, python, ....
      */
     language: 'python',
 
     /**
-     * @cfg {string} theme
+     * @cfg {String} theme
      */
     theme: 'crimson_editor',
 
-    /**
-     * private attributes
-     */
+    // private property
     editor: null,
 
-    /**
-     * private method requests by the component model of ExtJS
-     */
+    // private method requests by the component model of ExtJS
     beforeDestroy: function () {
 
         "use strict";
@@ -51,7 +41,10 @@ App.form.AceEditorField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * Return the value of this field
+     * Return the value of this field.
+     *
+     * @return {String}
+     *
      */
     getValue: function () {
 
@@ -65,10 +58,11 @@ App.form.AceEditorField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private hanlder to render the editor super seeding the base class method
+     * Render the editor field.
      *
      * @param {Ext.Element} ct The container to render to.
      * @param {Object} position The position in the container to render to.
+     *
      */
     onRender: function (ct, position) {
 
@@ -89,8 +83,10 @@ App.form.AceEditorField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * Set the value for this field
-     * @param {Object} value
+     * Set the value for this field.
+     *
+     * @param {String} value
+     *
      */
     setValue: function (value) {
 
diff --git a/static/plugin_dbui/src/fieldlist.js b/static/plugin_dbui/src/fieldlist.js
index e06c92b0..7b1dbc13 100644
--- a/static/plugin_dbui/src/fieldlist.js
+++ b/static/plugin_dbui/src/fieldlist.js
@@ -1,34 +1,26 @@
 /**
  * The ListField is an Ext.grid.GridPanel which is associated
- * to a list field.
+ * to the database list field. It can be embedded in Ext.form.FormPanel.
  *
- * The list can only contains string.
+ * **Note** :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
+ * @extends Ext.form.Field
+ * @xtype xlistfield
  *
+ * @experimental
+ * @since 0.4.15.0
  */
 App.form.ListField = Ext.extend(Ext.form.Field, {
 
     /**
-     * @cfg {boolean} autoHeight false by default
+     * @cfg {boolean} autoHeight
      */
     autoHeight: false,
 
     /**
      * @cfg {string} header
-     * label of the column display in the grid widget
+     * label of the column display in the grid widget.
      */
     header: 'Element',
 
@@ -36,34 +28,32 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
      * @cfg {number} height
      */
     /**
-     * @cfg {boolean} hideHeader false by default
+     * @cfg {boolean} hideHeader
      */
     hideHeader: false,
 
     /**
-     * @cfg{boolean} ignoreEmptyRows by default true
-     * Empty string are not copied in the list return by the getValue method.
+     * @cfg{boolean} ignoreEmptyRows
+     * Empty string are not copied in the list return by the #getValue method.
      */
     ignoreEmptyRows: true,
 
     /**
      * @cfg {number} minimumRows
-     * The minimum number of rows displayed in the grid.
-     * There fill with empty string when values are not defined.
-     * Empty string can be ignored when getting the list using ignoreEmptyRows.
+     * The minimum number of element displayed in the list.
+     * The grid is filled with empty string when values are missing.
+     * Empty string can be ignored when getting the list using
+     * the property #ignoreEmptyRows.
+     *
      */
     minimumRows: 3,
 
-    /**
-     * private attributes
-     */
+    // private properties
     grid: null,
     menu: null,
     rowIndex: undefined,
 
-    /**
-     * private attributes for internationalization
-     */
+    // private properties for internationalization
     textAdd: 'Insert row',
     textDestroy: 'Delete row',
     textDestroytitle: 'Delete ...',
@@ -71,9 +61,7 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
     textGoDown: 'Move down',
     textGoUp: 'Move up',
 
-    /**
-     * private method requests by the component model of ExtJS
-     */
+    // private method requests by the component model of ExtJS
     initComponent: function () {
 
         "use strict";
@@ -152,9 +140,7 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
         App.form.ListField.superclass.initComponent.call(this);
     },
 
-    /**
-     * private method requests by the component model of ExtJS
-     */
+    // private method requests by the component model of ExtJS
     beforeDestroy: function () {
 
         "use strict";
@@ -170,7 +156,10 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
 
     /**
      * Return the value of this field
-     * Empty string are not copied in the list when ignoreEmptyRows is true.
+     * Empty string are not copied in the list when #ignoreEmptyRows is true.
+     *
+     * @return {Array}
+     *
      */
     getValue: function () {
 
@@ -193,7 +182,7 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private handler to add a key
+     * Add an element to the list below the selected one.
      */
     onAddRow: function () {
 
@@ -207,8 +196,10 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * Private handler to inhibit context menu
+     * Show the context menu.
+     *
      * @param {Ext.EventObject} event
+     *
      */
     onContextMenu: function (event) {
 
@@ -222,7 +213,7 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private handler to delete a row
+     * Delete the selected element of the list.
      */
     onDeleteRow: function () {
 
@@ -245,7 +236,7 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private handler to move a row down
+     * Move the selected row down.
      */
     onGoDown: function () {
 
@@ -268,7 +259,7 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private handler to move a row up
+     * Move the selected row up.
      */
     onGoUp: function () {
 
@@ -291,10 +282,11 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private hanlder to render the grid super seeding he base class method
+     * Render the field.
      *
      * @param {Ext.Element} ct The container to render to.
      * @param {Object} position The position in the container to render to.
+     *
      */
     onRender: function (ct, position) {
 
@@ -323,10 +315,12 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * private handler to handle the row context menu
+     * Show the row context menu.
+     *
      * @param {Ext.grid.PropertyGrid} grid
      * @param {Number} rowIndex
      * @param {Ext.EventObject} event
+     *
      */
     onRowContextMenu: function (grid, rowIndex, event) {
 
@@ -354,8 +348,10 @@ App.form.ListField = Ext.extend(Ext.form.Field, {
     },
 
     /**
-     * Set the value for this field
-     * @param {Object} value
+     * Set the value for this field.
+     *
+     * @param {Array} value
+     * The content of the list.
      */
     setValue: function (value) {
 
diff --git a/static/plugin_dbui/src/form.js b/static/plugin_dbui/src/form.js
index 81a2e7a1..5c14ee3e 100644
--- a/static/plugin_dbui/src/form.js
+++ b/static/plugin_dbui/src/form.js
@@ -1,33 +1,28 @@
 /**
- * The FormPanel is an Ext.form.formPanel with an App.data.DirectStore.
- * It comes with two button 'Action' and 'Reset' and a set of method to
+ * The FormPanel is an Ext.form.formPanel linked to an App.data.DirectStore.
+ * It comes with two buttons *Action* and *Reset* as well as a set of methods to
  * create, duplicate, destroy and update record in the direct store.
  *
  * This object can be used as a classic form, a row editor for a grid,
  * a record browser, ....
  *
- * The action associated to the button is set via the setAction method.
- * the create action is set by default.
- *
- * The type of this component is xform.
+ * The action associated to the button is set via the #setAction method.
  *
+ * @class App.form.FormPanel
  * @extends Ext.form.FormPanel
- * @version
+ * @xtype xform
  *
  */
-Ext.namespace('App.form');
-
 App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
 
     /**
-     * @cfg {Ext.data.Store} store the Ext.data.Store that the form should use.
+     * @cfg {Ext.data.Store} store
+     * The Ext.data.Store that the form should use.
      * The store has to be defined since the actions rely on it.
      */
     store: null,
 
-    /**
-     * Predefined configuration options
-     */
+    // Predefined configuration options
     autoScroll: true,
     bodyStyle: 'padding:5px 5px 0',
     buttons: [{
@@ -43,9 +38,7 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     frame: true,
     monitorValid: true,
 
-    /**
-     * private attribute to keep track of current action parameters
-     */
+    // private attribute to keep track of current action parameters
     currentAction: null,
     currentRecord: null,
 
@@ -53,9 +46,7 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     // useful to add a new record before or after the selected one
     currentIndex: undefined,
 
-    /**
-     * private attributes for internationalization
-     */
+    // private attributes for internationalization
     textCreate: 'Create',
     textDestroy: 'Delete',
     textDuplicate: 'Duplicate',
@@ -73,9 +64,7 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     textUpdateErrorAction: 'The update record(s) is revert to its original values.',
     textUpdateFailed: 'Update failed...',
 
-    /**
-     * private method require by the ExtJs component model
-     */
+    // private method require by the ExtJs component model
     initComponent: function () {
 
         "use strict";
@@ -98,9 +87,10 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     },
 
     /**
-     * Private method the add a new record with the values of the form.
-     * The new record is inserted after the selected one if the
-     * attribute currentIndex is defined.
+     * Add a new record. It is inserted after the selected one
+     * when the attribute #currentIndex is defined.
+     *
+     * @param {Ext.data.Record} record
      */
     addRecord: function (record) {
 
@@ -119,9 +109,7 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
         this.currentIndex = undefined;
     },
 
-    /**
-     * private method required by the ExtJS component model
-     */
+    // private method required by the ExtJS component model
     beforeDestroy: function () {
 
         "use strict";
@@ -136,7 +124,7 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     },
 
     /**
-     * Private method to enable/disable all fields of the form
+     * Enable or disable all fields of the form
      * @param {Object} boolean
      */
     disableFields: function (bool) {
@@ -152,10 +140,10 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     },
 
     /**
-     * Handler to perform the current action on the store.
-     * The current action is set by the setAction method.
-     * Should not be call directly, except for delete without confirmation.
-     * Raise an error if the store is not defined.
+     * Execute the #currentAction on the store.
+     * The current action is set by the #setAction method.
+     *
+     * **Note:** Raise an error when the store is not defined.
      */
     doAction: function () {
 
@@ -202,11 +190,8 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     },
 
     /**
-     * Private method to hard reset the form.
-     *
-     * The hard reset erases the originally loaded values and reset the form.
-     * Hard reset is required to clean form in sequence like update, create,...
-     * It handle properly default value for ComboBox.
+     * Hard reset of the form.
+     * The field values are reset to the default values.
      *
      */
     hardReset: function () {
@@ -222,8 +207,8 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     },
 
     /**
-     * Handler to process store exception
-     * the scope of this function is App.form.FormPanel
+     * Process store exception
+     * The scope of this function is App.form.FormPanel
      * See Ext.data.DataProxy for the description of the arguments
      * @param {Object} proxy
      * @param {Object} type
@@ -337,12 +322,13 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     },
 
     /**
-     * Public method to set the action associated to the form.
+     * Set the action associated to the form.
      * The record is load into the form and the text of the button is
-     * properly set. Understood action are: create, destroy, duplicate,
-     * update and view.
-     * @param {Object} action
-     * @param {Object} record
+     * properly set.
+     *
+     * @param {String} action
+     * Valid action are create, destroy, duplicate, update and view.
+     * @param {Ext.data.Record} record
      */
     setAction: function (action, record) {
 
@@ -400,7 +386,7 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     },
 
     /**
-     * Private method to reset the form.
+     * Soft reset of the form.
      * The field values are reset to those originally loaded.
      */
     softReset : function () {
@@ -411,9 +397,8 @@ App.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
     },
 
     /**
-     * Private method to update the selected record with the value of the form
-     * This method have been designed to handle foreign keys, date object, ....
-     * @param {Object} record
+     * Update the selected record with the value of the form.
+     * @param {Ext.data.Record} record
      */
     updateRecord: function (record) {
 
diff --git a/static/plugin_dbui/src/grid.js b/static/plugin_dbui/src/grid.js
index 1d89bea7..fc969dee 100644
--- a/static/plugin_dbui/src/grid.js
+++ b/static/plugin_dbui/src/grid.js
@@ -1,12 +1,11 @@
 /**
- * The Grid class is Ext.grid.GridPanel with a Ext.PagingToolbar
+ * The Grid class is the Ext.grid.GridPanel with the Ext.PagingToolbar.
  * Many functionality can be added through grid plugins like
  * App.grid.RowEditor, ....
  *
- * The type of this component is xgrid.
- *
- * @extends Ext.gridPanel
- * @version
+ * @class App.grid.Grid
+ * @extends Ext.grid.GridPanel
+ * @xtype xgrid
  *
  */
 
@@ -15,28 +14,26 @@ Ext.namespace('App.grid');
 App.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
 
     /**
-     * @cfg nRows integer
-     * Default number of rows display in the grid.
+     * @property {Number} nRow integer
+     * The number of rows display in the grid.
      * This parameter is only use when running with a paging plugin.
      */
     nRows: 10,
 
     /**
      * @event resetgrid
-     * Can be used to reset underlying plugin when the reset
-     * method is triggered
-     */
-    /**
-     * private attributes used by plugins
+     * Fire by the method #reset.
      */
+
+    // private attributes used by plugins
     rowEditor: null,
 
     /**
-     * Constructor
+     * @constructor
      *
-     * NOTE:
-     * Required in ExtJS 3.4 convert rownumberer xtype
-     * into an Ext.grid.RowNumberer. Not needed in ExtJS 4
+     * **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) {
@@ -52,9 +49,8 @@ App.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
         Ext.apply(this, config);
         App.grid.Grid.superclass.constructor.call(this);
     },
-    /**
-     * private method requests by the component model of ExtJS
-     */
+
+    // private method requests by the component model of ExtJS
     initComponent: function () {
 
         "use strict";
@@ -79,14 +75,12 @@ App.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
         }
     },
 
-    /**
-     * Private method requires by the Ext JS component model
-     *
-     * The grid takes the responsibility to destroy its plugin.
-     * by calling the method destroyPlugin(grid).
-     * This method is not a part of the Ext JS component model.
-     *
-     */
+    // Private method requires by the Ext JS component model
+    //
+    // The grid takes the responsibility to destroy its plugin.
+    // by calling the method destroyPlugin(grid).
+    // This method is not a part of the Ext JS component model.
+    //
     beforeDestroy: function () {
 
         "use strict";
@@ -115,11 +109,8 @@ App.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
     },
 
     /**
-     * reset the grid
-     * The store is load with fresh data and the event 'resetgrid' is emitted.
-     * Paging and slider plugin might be reset using the 'resetgrid' event.
-     * GridFilter object can be also reset using the same mechanism.
-     *
+     * Reset the grid.
+     * The store is load with fresh data and the event *resetgrid* is fired.
      * The scope is the grid
      *
      */
diff --git a/static/plugin_dbui/src/gridfilter.js b/static/plugin_dbui/src/gridfilter.js
index a9542389..545984e1 100644
--- a/static/plugin_dbui/src/gridfilter.js
+++ b/static/plugin_dbui/src/gridfilter.js
@@ -1,49 +1,35 @@
 /**
- * The GridFilter class
+ * The GridFilter widget is a set of fields.
+ * It contains all the logic to filter the content of a grid
+ * according to the value defined in the fields.
  *
- * Associate to grid, it contains all the logic to filter the content of a grid
- * according to the value define in the form.
- *
- * @version
+ * @class App.grid.GridFilter
+ * @extends Ext.form.FieldSet
+ * @xtype xgridfilter
  *
  */
-
-Ext.namespace('App.grid');
-
 App.grid.GridFilter = Ext.extend(Ext.form.FieldSet, {
 
-    /**
-     * Private
-     * Dictionary with where clause related to the filter resquest
-     */
+    // Private object containing where clause related to the filter resquest
     filterConditions: {},
 
-    /**
-     * Private
-     * Reference to the paging toolBar
-     */
+    // Private reference to the paging toolBar
     pagingToolbar: null,
 
-    /**
-     * Private
-     * Reference to the grid store
-     */
+    // Private reference to the grid store
     store: null,
 
-    /**
-     * Predefined setting
-     *
-     * NOTE:
-     * the enableKeyEvents is mandatory for Ext.form.TextField
-     */
+    // Predefined setting
+    //
+    // NOTE:
+    // the enableKeyEvents is mandatory for Ext.form.TextField
+    //
     defaults: {
         anchor: '99%',
         enableKeyEvents: true
     },
 
-    /**
-     * private method requests by the component model of ExtJS
-     */
+    // private method requests by the component model of ExtJS
     initComponent: function () {
 
         "use strict";
@@ -76,9 +62,7 @@ App.grid.GridFilter = Ext.extend(Ext.form.FieldSet, {
         }
     },
 
-    /**
-     * private method requires by the Ext JS component model
-     */
+    // private method requires by the Ext JS component model
     beforeDestroy: function () {
 
         "use strict";
@@ -133,7 +117,9 @@ App.grid.GridFilter = Ext.extend(Ext.form.FieldSet, {
     },
 
     /**
-     * Handler to catch a change in field value and to filter the store
+     * Handler to catch a change in field value and to filter the store.
+     *
+     * @param {Ext.form.Field} field
      */
     onChange: function (field) {
 
@@ -184,7 +170,7 @@ App.grid.GridFilter = Ext.extend(Ext.form.FieldSet, {
 
     /**
      * Setup filter conditions
-     * @param {Ext.form.Field}
+     * @param {Ext.form.Field} field
      */
     setupCondition: function (field) {
 
@@ -234,10 +220,7 @@ App.grid.GridFilter = Ext.extend(Ext.form.FieldSet, {
         this.store.baseParams.where = conditions;
     },
 
-    /**
-     * private
-     * Helper function to load the store applying filter conditions
-     */
+    // private method to load the store applying filter conditions
     updateStore: function () {
 
         "use strict";
diff --git a/static/plugin_dbui/src/gridwithfilter.js b/static/plugin_dbui/src/gridwithfilter.js
index 5295d43b..70d65932 100644
--- a/static/plugin_dbui/src/gridwithfilter.js
+++ b/static/plugin_dbui/src/gridwithfilter.js
@@ -1,15 +1,14 @@
 /**
- *  A border layout with a grid and its filter
- *  The type of this component is xgridwithfilter.
+ * A border layout containing a App.grid.Grid with its App.grid.GridFilter.
  *
- *  @extends Ext.Panel
- *  @version
+ * @class App.grid.GridWithFilter
+ * @extends App.BasePanelWithSelector
+ * @xtype xgridwithfilter
  *
  */
-Ext.namespace('App.grid');
-
 App.grid.GridWithFilter = Ext.extend(App.BasePanelWithSelector, {
 
+    // private method require by the Ext JS component model
     initComponent: function () {
 
         "use strict";
@@ -39,9 +38,7 @@ App.grid.GridWithFilter = Ext.extend(App.BasePanelWithSelector, {
         selectorPanel.on('collapse', this.onCollapse, this);
     },
 
-    /**
-     * private method requires by the Ext JS component model
-     */
+    // private method requires by the Ext JS component model
     beforeDestroy: function () {
 
         "use strict";
@@ -64,8 +61,6 @@ App.grid.GridWithFilter = Ext.extend(App.BasePanelWithSelector, {
 
     /**
      * Handler to refresh the gridView when the selectorPanel is collapsed.
-     * @param {Ext.Panel} selectorPanel
-     *
      */
     onCollapse: function () {
 
diff --git a/static/plugin_dbui/src/jsonstore.js b/static/plugin_dbui/src/jsonstore.js
index aa9545b6..374cede6 100644
--- a/static/plugin_dbui/src/jsonstore.js
+++ b/static/plugin_dbui/src/jsonstore.js
@@ -1,57 +1,51 @@
 /**
- * A JsonStore to read/write in the database using the EXt.Direct protocol.
- * Design to work with the class DbSvc on the server side.
+ * A JsonStore is a store to read/write in the database using
+ * the Ext.Direct protocol.
+ * It has been designed to work with the class DbSvc on the server side.
  *
  * This class is an Ext.dat.DirectStore with an Ext.data.JsonWriter.
  *
- * Defaults configuration parameters of the writer are defined in the
- * constructor. Changing them might break the decoding running on the
- * server-side and break the behavior of the grid widget.
+ * **Note**: defaults configuration parameters of the writer are
+ * defined in the constructor. Changing them might break the decoding
+ * running on the server-side and break the behaviour of the grid widget.
  *
  * The default API associated to this store is defined in the constructor
  *
- * The type of this component is xdirectstore.
- *
+ * @class App.data.DirectStore
  * @extends Ext.data.DirectStore
- * @version
- * *
+ * @xtype xdirectstore
+ *
  */
-Ext.namespace('App.data');
-
 App.data.DirectStore = Ext.extend(Ext.data.DirectStore, {
 
     /**
-     * @cfg(Boolean) encode JsonWiter property, by default false
+     * @property {Boolean} encode JsonWiter property, by default false
      * Changing this option might break the decoding running on the server-side
-     * NOTE: the default value is defined in the constructor
+     * **Note**: the default value is defined in the constructor
      */
     /**
-     * @cfg(Boolean) listful JsonWiter property, by default true
+     * @property {Boolean} listful JsonWiter property, by default true
      * Changing this option might break the decoding running on the server-side
-     * NOTE: the default value is defined in the constructor
+     * **Note**: the default value is defined in the constructor
      */
     /**
-     * @cfg(Boolean) writeAllFields JsonWiter property, by default false
+     * @property {Boolean} writeAllFields JsonWiter property, by default false
      * Changing this option might break the decoding running on the server-side
-     * NOTE: the default value is defined in the constructor
-     */
-    /**
-     * pre-defined configuration option
-     * The autoSave parameter is helpful for gridRowEditor.
+     * **Note**: the default value is defined in the constructor
      */
+    // pre-defined configuration option
     autoLoad: true,
     autoSave: true,
 
-    /**
-     * private parameter
-     * List of the where condition at startup.
-     * It is a copy of the baseParams.where which can be modified by filter.
-     * The intialWhere configuration parameter can be used reseting filter
-     */
+    // private property.
+    // List of the where condition at startup.
+    // It is a copy of the baseParams.where which can be modified by filter.
+    // The intialWhere configuration parameter can be used reseting filter
+    //
     initialWhere: undefined,
 
     /**
-     * constructor
+     * @constructor
      */
     constructor: function (config) {
 
@@ -101,9 +95,7 @@ App.data.DirectStore = Ext.extend(Ext.data.DirectStore, {
         this.on('write', this.onWrite);
     },
 
-    /**
-     * Destructor
-     */
+    // private method request by the Ext JS component model
     destroy: function () {
 
         "use strict";
@@ -115,8 +107,9 @@ App.data.DirectStore = Ext.extend(Ext.data.DirectStore, {
 
     /**
      * Handler to update the total number of records after a write action
-     * @param {Object} store
-     * @param {Object} action
+     * @param {Ext.data.Store} store
+     * @param {String} action
+     * Understood action are *create* and *destroy*.
      */
     onWrite: function (store, action) {
 
diff --git a/static/plugin_dbui/src/linkedcombobox.js b/static/plugin_dbui/src/linkedcombobox.js
index fd1a9819..bd9b71f8 100644
--- a/static/plugin_dbui/src/linkedcombobox.js
+++ b/static/plugin_dbui/src/linkedcombobox.js
@@ -1,6 +1,6 @@
 /**
- * Linked combobox has been designed to solve the case when the values of
- * a combobox depends on the select value of another combobox.
+ * The linked combobox widget has been designed to solve the case
+ * when the values of a combobox depends on the select value of another one.
  *
  * The design is based on a master and a slave combobox which are
  * linked to a common store.
@@ -15,28 +15,24 @@
  *
  * Several masters and slaves can be attached to a single store.
  *
+ * @class App.form.LinkedComboBox
  * @extends Ext.form.ComboBox
+ * @xtype xlinkedcombobox
  *
  */
-Ext.namespace('App.form');
-
 App.form.LinkedComboBox = Ext.extend(Ext.form.ComboBox, {
 
     /**
-     * @cfg {String] role role of the combobox either master of slave.
-     * The default is slave
+     * @cfg {String} role role of the combobox either master of slave.
      */
     role: 'slave',
 
-    /**
-     * private properties
-     * {Ext.data.Store} masterStore the common store shared by the master and slaves
-     */
+    // private properties
+    // the masterStore (Ext.data.Store) is the common store
+    // shared by the master and slaves
     masterStore: null,
 
-    /**
-     * private method require by the ExtJS component model
-     */
+    // private method require by the ExtJS component model
     initComponent: function () {
 
         "use strict";
@@ -97,9 +93,7 @@ App.form.LinkedComboBox = Ext.extend(Ext.form.ComboBox, {
         }
     },
 
-    /**
-     * Private method requires by the Ext JS component model
-     */
+    // private method requires by the Ext JS component model
     beforeDestroy: function () {
 
         "use strict";
@@ -120,23 +114,19 @@ App.form.LinkedComboBox = Ext.extend(Ext.form.ComboBox, {
     },
 
     /**
-     * Helper method to filter the master store
-     * with the current value of the combobox
+     * filter the master store with the current value of the combobox
      *
      * @param {Ext.form.combobox} combo
      * @param {Ext.data.Record} record
-     * @param {Integer} index
+     * @param {Number} index
      */
     filterMasterStore: function (combo, record, index) {
         "use strict";
         this.masterStore.filter(this.valueField, combo.getValue());
     },
 
-    /**
-     * Private method to initialise the slave combobox
-     * A slave is disable at startup.
-     *
-     */
+    // private method to initialise the slave combobox
+    // A slave is disable at startup.
     initSlave: function () {
 
         "use strict";
@@ -177,9 +167,7 @@ App.form.LinkedComboBox = Ext.extend(Ext.form.ComboBox, {
         }
     },
 
-    /**
-     * Private method to load data in the combo store from the master one
-     */
+    // Private method to load data in the combo store from the master one
     loadMasterData: function () {
 
         "use strict";
@@ -204,8 +192,8 @@ App.form.LinkedComboBox = Ext.extend(Ext.form.ComboBox, {
     },
 
     /**
-     * Handler to update the content of the slave combobox content and to select
-     * when a master value is selected
+     * Update the content of the slave combobox content
+     * when a master value is selected.
      */
     onDataChanged: function () {
 
diff --git a/static/plugin_dbui/src/panelwithurlselector.js b/static/plugin_dbui/src/panelwithurlselector.js
index 555ddbd3..a76833c2 100644
--- a/static/plugin_dbui/src/panelwithurlselector.js
+++ b/static/plugin_dbui/src/panelwithurlselector.js
@@ -1,5 +1,5 @@
 /**
- * This widget is split in two part a main panel and a selector.
+ * The Panel with URL selector is split in two parts a main panel and a selector.
  * The selector display a list of fields organized in fieldset.
  * There values define the URL parameters. The main panel displays
  * the URL content.
@@ -18,55 +18,56 @@
  *
  * The type of this component is xpanelwithurlselector.
  *
- * @extends App.PanelWithSelector
- * @version
+ * @class App.PanelWithUrlSelector
+ * @extends App.BasePanelWithSelector
+ * @xtype xpanelwithurlselector
  *
  */
-Ext.namespace('App');
-
 App.PanelWithUrlSelector = Ext.extend(App.BasePanelWithSelector, {
 
     /**
-     * @param {String} baseurl well form url, i.e http://blabla
+     * @cfg {String} baseurl
+     * The well form URL, e.g http://blabla.
      */
-    baseUrl: null,
+    baseUrl: undefined,
 
     /**
-     * @param {String} ctrFiedl  name of the field defining the controller
-     * When define the url become baseUrl/ctrlFieldValue
+     * @cfg {String} ctrFiedl
+     * The name of the field defining the controller.
+     * The URL becomes baseUrl/ctrlFieldValue
      */
-    ctrlField: null,
+    ctrlField: undefined,
 
     /**
-     * @param {String} extFiedl  name of the field defining the extension
-     * When define the url become baseUrl.extFieldValue
+     * @cfg {String} extFiedl
+     * The name of the field defining the extension.
+     * The URL becomes baseUrl.extFieldValue
      */
-    extField: null,
+    extField: undefined,
 
     /**
-     * @param {String} funcFiedl  name of the field defining the function
-     * When define the url become baseUrl/funcFieldValue
+     * @cfg {String} funcFiedl
+     * The name of the field defining the function.
+     * The URL become baseUrl/funcFieldValue
      */
     funcField: null,
 
     /**
-     * @param {Boolean} isMathJax True is the mathjax library is installed
+     * @cfg {Boolean} isMathJax
+     * Set the value to true when the mathjax library is installed.
      */
     isMathJax: false,
 
     /**
-     * @param {Number} Timeout  timeout for the Ajax request in second
+     * @cfg {Number} timeout
+     * The timeout for the Ajax request in second.
      */
     timeout: 30,
 
-    /**
-     * Private attributes for internationalization
-     */
+    // Private attributes for internationalization
     textLoad: 'Loading...',
 
-    /**
-     * Require by the ExtJS model
-     */
+    // Private method requires by the ExtJS model
     initComponent: function () {
 
         "use strict";
@@ -78,9 +79,7 @@ App.PanelWithUrlSelector = Ext.extend(App.BasePanelWithSelector, {
         this.resetButton.on('click', this.onReset, this);
     },
 
-    /**
-     * Private method requires by the Ext JS component model
-     */
+    // Private method requires by the Ext JS component model
     beforeDestroy: function () {
 
         "use strict";
@@ -167,9 +166,9 @@ App.PanelWithUrlSelector = Ext.extend(App.BasePanelWithSelector, {
      * It is useful to detect HTTP error and to perform post
      * processing (MathJax).
      *
-     * Arguments ares those of the Ext.Update.update.
+     * Arguments are those of the Ext.Update.update.
      * @param {Ext.Element} el the element being update
-     * @param {boolean} success true for succes false for failure
+     * @param {Boolean} success true for success false for failure
      * @param {XMLHttpRequest} response
      * @param {Object} options
      */
diff --git a/static/plugin_dbui/src/pformtooltip.js b/static/plugin_dbui/src/pformtooltip.js
index ab44d223..e0d33630 100644
--- a/static/plugin_dbui/src/pformtooltip.js
+++ b/static/plugin_dbui/src/pformtooltip.js
@@ -1,28 +1,22 @@
 /**
- * The form tooltip plugin
+ * The tooltip plugin for App.form.FormPanel.
  *
- * Acitvate tooltip associated to each field.
- * Can be used with Ext.form.FormPanel, Ext.form.Fieldset, ....
- * it used a dedicated Field configuration option: tipText.
+ * Activate tooltip associated to each field.
+ * It can be used with App.form.FormPanel and Ext.form.Fieldset.
  *
- * The ptype of this component is pFormToolTip.
+ * **Note**: It used the dedicated Field configuration option: *tipText*.
  *
- * @version
+ * @class App.form.ToolTip
+ * @extend Object
+ * @ptype pFormToolTip
  *
  */
-
-Ext.namespace('App.form');
-
 App.form.ToolTip = Ext.extend(Object, {
 
-    /**
-     * Private parameter identifying the type of plugin
-     */
+    // Private parameter identifying the type of plugin
     ptype: 'pFormToolTip',
 
-    /**
-     * Plugin initialization
-     */
+    // Private method require by the Ext JS plugin model
     init: function (basicform) {
 
         "use strict";
diff --git a/static/plugin_dbui/src/pgridexpertmenu.js b/static/plugin_dbui/src/pgridexpertmenu.js
index 0e6b839a..637c4828 100644
--- a/static/plugin_dbui/src/pgridexpertmenu.js
+++ b/static/plugin_dbui/src/pgridexpertmenu.js
@@ -1,26 +1,20 @@
 /**
  * The grid expert menu plugin for toolbar
- * The ptype of this component is pGridExpertMenu.
  *
+ * @class App.grid.ExpertMenu
+ * @extend Object
+ * @ptype pGridExpertMenu
  */
-Ext.namespace('App.grid');
-
 App.grid.ExpertMenu = Ext.extend(Object, {
 
-    /**
-     * Private parameter identifying the type of plugin
-     */
+    // Private property identifying the type of plugin
     ptype: 'pGridExpertMenu',
 
-    /**
-     * Private attribute for internationalisation
-     */
+    // Private properties for internationalisation
     textExport: 'Export to CSV file',
     textReset: 'Reset',
 
-    /**
-     * Plugin initialisation
-     */
+    // Private method requires by the Ext JS plugin model
     init: function(grid) {
 
         "use strict";
diff --git a/static/plugin_dbui/src/pgridmathjax.js b/static/plugin_dbui/src/pgridmathjax.js
index 6c3d7b84..03cd4f81 100644
--- a/static/plugin_dbui/src/pgridmathjax.js
+++ b/static/plugin_dbui/src/pgridmathjax.js
@@ -1,25 +1,22 @@
 /**
- * Plugin to render mathematics formula embedded in grid content.
+ * The plugin to render mathematics formula embedded in grid content.
  * The processing is performed by MathJax.
  * The MathJax library is loaded by the framework
  *
- * @version
+ * @class App.grid.MathJax
+ * @extend Object
+ * @ptype pGridMathJax
  *
  */
-
-Ext.namespace('App.grid');
-
 App.grid.MathJax = Ext.extend(Object, {
 
-    /**
-     * Private attribute identifying the type of plugin
-     */
+    // Private property identifying the type of plugin
     ptype: 'pGridMathJax',
 
     /**
-     * Plugin initialization
+     * The plugin initialization
      *
-     * @param {App.grid.Grid} gid
+     * @param {App.grid.Grid} grid
      *
      */
     init: function (grid) {
@@ -30,12 +27,11 @@ App.grid.MathJax = Ext.extend(Object, {
         grid.store.on('write', this.onProcessMath, grid);
     },
 
-    /**
-     * Private method to destroy the plugin.
-     * Purge the grid and store listeners associated to the plugin.
-     *
-     * @param {App.grid.Grid} grid
-     */
+    // Private method to destroy the plugin.
+    // Purge the grid and store listeners associated to the plugin.
+    //
+    // @param {App.grid.Grid} grid
+    //
     destroyPlugin: function(grid) {
 
         "use strict";
@@ -46,7 +42,7 @@ App.grid.MathJax = Ext.extend(Object, {
     },
 
     /**
-     * Handler to process math objects belonging to the App.grid.Grid
+     * Handler to process maths objects belonging to the App.grid.Grid
      * The scope is the App.grid.Grid.
      *
      */
diff --git a/static/plugin_dbui/src/pgridpaging.js b/static/plugin_dbui/src/pgridpaging.js
index d114e03b..f2d35e0e 100644
--- a/static/plugin_dbui/src/pgridpaging.js
+++ b/static/plugin_dbui/src/pgridpaging.js
@@ -1,30 +1,29 @@
 /**
- * The paging bottom bar plugin
- * The ptype of this component is pGridPaging.
+ * The grid plugin instantiating the paging bottom bar.
+ * It contains the widget to navigate between page and a slider
+ * to fixed the number of rows per page.
  *
- *
- * NOTE: the number of row load in the grid at the first time
+ * **Note**: the number of row load in the grid at the first time
  * is defined by the grid when loading the store.
  *
- * @version
+ * @class App.grid.Paging
+ * @extend Object
+ * @ptype pGridPaging
  *
  */
-Ext.namespace('App.grid');
-
 App.grid.Paging = Ext.extend(Object, {
 
-    /**
-     * Private parameter identifying the type of plugin
-     */
+    // Private property identifying the type of plugin
     ptype: 'pGridPaging',
 
-    /**
-     * Private attribute for internationalisation
-     */
+    // Private property for internationalisation
     textSlider: 'Rows per page',
 
     /**
-     * Plugin initialisation
+     * The plugin initialization
+     *
+     * @param {App.grid.Grid} grid
+     *
      */
     init: function (grid) {
 
@@ -77,14 +76,14 @@ App.grid.Paging = Ext.extend(Object, {
         grid.on('resetgrid', this.onReset, grid);
     },
 
-    /**
-     * Private method to destroy the plugin.
-     * Reset the slider and the paging parameters to default values.
-     * Purge grid and store listeners associated to the plugin.
-     * Destroy the bottom toolbar.
-     *
-     * @param {App.grid.Grid} grid
-     */
+    //
+    // Private method to destroy the plugin.
+    // Reset the slider and the paging parameters to default values.
+    // Purge grid and store listeners associated to the plugin.
+    // Destroy the bottom toolbar.
+    //
+    // @param {App.grid.Grid} grid
+    //
     destroyPlugin: function (grid) {
 
         "use strict";
@@ -101,8 +100,17 @@ App.grid.Paging = Ext.extend(Object, {
     },
 
     /**
-     * Handler to change the number of rows per page
-     * the scope is the bottom tool bar
+     * Fire when the slider value is change by the user.
+     * The scope is the bottom tool bar.
+     *
+     * @param {Ext.slider.SingleSlider} slider
+     *
+     * @param {Number} newValue
+     * The new value which the slider has been changed too.
+     *
+     * @param {Ext.slider.Thumb} thumb
+     * the thumb that was changed.
+     *
      */
     onChangePageSize: function (slider, newValue, thumb) {
 
@@ -114,8 +122,17 @@ App.grid.Paging = Ext.extend(Object, {
     },
 
     /**
-     * Handler to initialise the number of rows per page and the number of page
-     * the scope is the grid
+     * Initialise the number of rows per page and the number of page.
+     * It is fired during the initialization or when the store is loaded.
+     * The scope is the grid.
+     *
+     * @param {Ext.data.Store} store
+     *
+     * @param {Ext.data.Record[]} records
+     * The records that were loaded.
+     *
+     * @param {Object} options
+     * The loading option that where specified.
      */
     onInit: function (store, records, options) {
 
@@ -139,8 +156,8 @@ App.grid.Paging = Ext.extend(Object, {
     },
 
     /**
-     * Handler to reset the paging parameters
-     * The scope is the grid
+     * Reset the paging parameters.
+     * The scope is the grid.
      *
      */
     onReset: function() {
@@ -161,9 +178,9 @@ App.grid.Paging = Ext.extend(Object, {
     },
 
     /**
-     * Handler to update the slider/bottomToolBar parameters after a store write action.
+     * Update the slider/bottomToolBar parameters after a store write action.
      * The latter create or destroy records in the store.
-     * The scope is the bottom grid
+     * The scope is the bottom grid.
      */
     onWrite: function () {
 
diff --git a/static/plugin_dbui/src/pgridroweditorbase.js b/static/plugin_dbui/src/pgridroweditorbase.js
index a799545e..30b1aa13 100644
--- a/static/plugin_dbui/src/pgridroweditorbase.js
+++ b/static/plugin_dbui/src/pgridroweditorbase.js
@@ -1,32 +1,26 @@
 /**
- * The grid row editor plugin
- * The gridRowEditor is a window containing a formPanel.
+ * The grid plugin instantiating the row editor.
+ * The widget is a Ext.Window containing the App.form.FormPanel.
  * It exposes series of handlers to delete, duplicate, update, view the
- * selected row of the grid, as well as to create new row.
+ * selected row of the App.grid.Grid, as well as to create new row.
  *
- * This plugin limit the number of selected row to one.
- *
- * The ptype of this component is pgridroweditor.
+ * **Note**: This plugin limits the number of selected row to one.
  *
+ * @class App.grid.RowEditor
  * @extends Ext.Window
- * @version
+ * @ptype pGridRowEditor
  *
  */
-
-Ext.namespace('App.grid');
-
 App.grid.RowEditor = Ext.extend(Ext.Window, {
 
-    /**
-     * Private attribute identifying the type of plugin
-     */
+    // Private attribute identifying the type of plugin
     ptype: 'pGridRowEditor',
+
+    // Private shortcuts
     formPanel: null,
     grid: null,
 
-    /**
-     * Private attributes for internationalization
-     */
+    // Private attributes for internationalization
     addTitle: "Create a new record...",
     deleteTitle: "Delete the record...",
     duplicateTitle: "Duplicate the record...",
@@ -34,9 +28,7 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     viewTitle: "View the record...",
     textMsg: 'Select a row please',
 
-    /**
-     * pre-defined configuration options for the window
-     */
+    // pre-defined configuration options for the window
     autoScroll: true,
     closeAction: 'hide',
     constrainHeader: true,
@@ -47,7 +39,7 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     /**
      * Plugin initialization
      *
-     * @param {App.grid.Grid} grid the grid instantiating the plugin
+     * @param {App.grid.Grid} grid
      */
     init: function (grid) {
 
@@ -77,10 +69,27 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Private call-back method to instantiate the formPanel
-     * the scope is the gridRowEditor
-     * @param {Object} provider
+     * Instantiate the App.form.FormPanel.
+     * The scope is the RowEditor.
+     *
+     * @param {Ext.direct.Provider} provider
+     *
      * @param {Object} response
+     * @param {String} response.type
+     * The type of the transaction: rpc
+     *
+     * @param {Number} response.tid
+     * The transaction id that had just been processed.
+     *
+     * @param {Object} response.action
+     * The class action that has just been processed.
+     *
+     * @param {String} response.method
+     * The method that has just been processed.
+     *
+     * @param {Object} response.result
+     * The configuration of the App.form.Panel.
+     *
      */
     addFormPanel: function (provider, response) {
 
@@ -98,22 +107,22 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
                            this.formPanel);
     },
 
-    /**
-     * Private method to destroy the plugin.
-     *
-     * Purge the grid listeners associated to the plugin and
-     * destroy the component embedded in the window.
-     *
-     * NOTE:
-     * Add the end of this process a minimal window remain.
-     * The standard approach based Ext.Window.close() do nothing.
-     * The remaining object is a bare window which is re-used
-     * when the editor is call again for the same table.
-     * Therefore this is not an issue.
-     *
-     * @param {App.grid.Grid} the parent grid
-     *
-     */
+    //
+    // Private method to destroy the plugin.
+    //
+    // Purge the grid listeners associated to the plugin and
+    // destroy the component embedded in the window.
+    //
+    // NOTE:
+    // Add the end of this process a minimal window remain.
+    // The standard approach based Ext.Window.close() do nothing.
+    // The remaining object is a bare window which is re-used
+    // when the editor is call again for the same table.
+    // Therefore this is not an issue.
+    //
+    // @param {App.grid.Grid} the parent grid
+    //
+    //
     destroyPlugin: function (grid) {
 
         "use strict";
@@ -129,11 +138,12 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Private method to return the record
-     * associate to the row selected in the grid
+     * Return the record associated to the row selected in the grid.
      *
+     * @return {Ext.data.Record/Boolean}
      * In absence of selected row a warning message is shown
      * and the function return false.
+     *
      */
     getSelected: function () {
 
@@ -150,9 +160,7 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Handler to add a new row.
-     * The scope use by the handler is the plugin object.
-     *
+     * Add a new row.
      */
     onAddRow: function () {
 
@@ -166,9 +174,7 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Handler to delete the selected row without confirmation
-     * The scope use by the handler is the plugin object.
-     *
+     * Delete the selected row without confirmation.
      */
     onDeleteRow: function () {
 
@@ -183,9 +189,7 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Handler to duplicate the selected row
-     * The scope use by the handler is plugin object.
-     *
+     * Duplicate the selected row.
      */
     onDuplicateRow: function () {
 
@@ -202,9 +206,7 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Handler to edit the selected row.
-     * The scope use by the handler is the plugin object.
-     *
+     * Edit the selected row.
      */
     onEditRow: function () {
 
@@ -219,9 +221,7 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Handler to hide the form when the transaction failed.
-     * The scope use by the handler is the plugin object.
-     * The form handle the exception and take action.
+     * Hide the form when the transaction failed.
      */
     onException: function () {
         "use strict";
@@ -229,9 +229,7 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Handler to view the selected row in the form.
-     * The scope use by the handler is the plugin object.
-     *
+     * View the selected row in the form.
      */
     onViewRow: function () {
 
@@ -246,13 +244,19 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Private handler call when the write transaction is successful.
-     * It aim is to hide the window.
-     * @param {Object} store
-     * @param {Object} action
+     * Fire when the write transaction is successful.
+     * Its main action is to hide the window.
+     *
+     * @param {Ext.data.store} store
+     *
+     * @param {String} action
+     *
      * @param {Object} result
+     * The 'data' picked-out out of the response for convenience.
+     *
      * @param {Object} transaction
-     * @param {Object} record
+     *
+     * @param {Ext.data.Record} record
      */
     onWrite: function (store, action, result, transaction, record) {
         "use strict";
@@ -260,8 +264,8 @@ App.grid.RowEditor = Ext.extend(Ext.Window, {
     },
 
     /**
-     * Private method to get the index (store) of the selected record
-     * and to write it in the formPanel
+     * Get the index of the selected record and fill
+     * the property #formPanel.indexSelectedRecord
      */
     setCurrentIndex: function () {
 
diff --git a/static/plugin_dbui/src/pgridroweditorconfirmdelete.js b/static/plugin_dbui/src/pgridroweditorconfirmdelete.js
index 3faf4640..653a8f9c 100644
--- a/static/plugin_dbui/src/pgridroweditorconfirmdelete.js
+++ b/static/plugin_dbui/src/pgridroweditorconfirmdelete.js
@@ -1,31 +1,21 @@
 /**
- * Extend the grid row editor plugin by adding confirmation on delete.
- * Have a look to App.grid.RowEditor for more information.
- *
- * The ptype of this component is pGridRowEditorConfirmDelete.
+ * Extend the grid App.grid.RowEditor plugin by adding confirmation on delete.
  *
+ * @class App.grid.RowEditorConfirmDelete
  * @extends App.grid.RowEditor
- * @version
+ * @ptype pGridRowEditorConfirmDelete
  *
  */
-
-Ext.namespace('App.grid');
-
 App.grid.RowEditorConfirmDelete = Ext.extend(App.grid.RowEditor, {
 
-    /**
-     * Private attribute identifying the type of plugin
-     */
+    // Private attribute identifying the type of plugin
     ptype: 'pGridRowEditorConfirmDelete',
 
-    /**
-     * Private attributes for internationalization
-     */
+    // Private attributes for internationalization
     confirmMsg: 'Do you really want to delete this item?',
 
     /**
-     * Handler to delete the selected row with confirmation
-     * The scope use by the handler is the plugin object.
+     * Delete the selected row asking confirmation.
      *
      */
     onDeleteRow: function () {
diff --git a/static/plugin_dbui/src/pgridroweditorcontextmenu.js b/static/plugin_dbui/src/pgridroweditorcontextmenu.js
index 262ef946..85d3a691 100644
--- a/static/plugin_dbui/src/pgridroweditorcontextmenu.js
+++ b/static/plugin_dbui/src/pgridroweditorcontextmenu.js
@@ -1,30 +1,22 @@
 /**
- * The row editor context menu plugin
+ * The grid plugin instantiating the RowEditor context menu.
  *
  * Display the context menu when the user right click on a row.
- * The content of the menu allows to manipulate the App.grid.RowEditor
- *
- * Requires the App.grid.GridRowEditor plugin.
- *
- * The ptype of this component is pGridRowEditorContextMenu.
+ * The content of the menu allows to manipulate the App.grid.RowEditor.
  *
+ * @class App.grid.RowEditorContextMenu
  * @extends Object
- * @version
+ * @ptype pGridRowEditorContextMenu
+ *
+ * @uses App.grid.RowEditor
  *
  */
-
-Ext.namespace('App.grid');
-
 App.grid.RowEditorContextMenu = Ext.extend(Object, {
 
-    /**
-     * Private attribute identifying the type of plugin
-     */
+    // Private attribute identifying the type of plugin
     ptype: 'pGridRowEditorContextMenu',
 
-    /**
-     * private attributes for internationalization
-     */
+    // private attributes for internationalization
     textAdd: 'Add',
     textCreate: 'Create',
     textDestroy: 'Delete',
@@ -34,7 +26,8 @@ App.grid.RowEditorContextMenu = Ext.extend(Object, {
 
     /**
      * Plugin initialization
-     * @param {Object} grid
+     *
+     * @param {App.grid.Grid} grid
      */
     init: function (grid) {
 
@@ -83,15 +76,15 @@ App.grid.RowEditorContextMenu = Ext.extend(Object, {
         });
     },
 
-    /**
-     * Destroy the plugin.
-     *
-     * Purge grid listeners associated to the plugin and
-     * destroy the menu component.
-     *
-     * @param {App.grid.Grid} the parent grid
-     *
-     */
+    //
+    // Destroy the plugin.
+    //
+    // Purge grid listeners associated to the plugin and
+    // destroy the menu component.
+    //
+    // @param {App.grid.Grid} the parent grid
+    //
+    //
     destroyPlugin: function (grid) {
 
         "use strict";
@@ -104,7 +97,11 @@ App.grid.RowEditorContextMenu = Ext.extend(Object, {
     },
 
     /**
-     * Private handler displaying the row context menu in an empty grid
+     * Show the context menu when right clicking in an empty grid.
+     *
+     * @param {App.grid.Grid} grid
+     * @param {Ext.EventObject} event
+     *
      */
     onContainerContextMenu: function (grid, event) {
 
@@ -115,8 +112,12 @@ App.grid.RowEditorContextMenu = Ext.extend(Object, {
     },
 
     /**
-     * Private handler displaying the context menu in the header
-     * Nothing is display in that case.
+     * Inhibit the context menu when right clicking in the header.
+     *
+     * @param {App.grid.Grid} grid
+     * @param {Number} columnIndex
+     * @param {Ext.EventObject} event
+     *
      */
     onHeaderContextMenu: function (grid, columIndex, event) {
         "use strict";
@@ -124,7 +125,12 @@ App.grid.RowEditorContextMenu = Ext.extend(Object, {
     },
 
     /**
-     * Private handler displaying the row context menu
+     * Show the context menu when right clicking in the non-empty grid.
+     *
+     * @param {App.grid.Grid} grid
+     * @param {Number} rowIndex
+     * @param {Ext.EventObject} event
+     *
      */
     onRowContextMenu: function (grid, rowIndex, event) {
 
diff --git a/static/plugin_dbui/src/pgridroweditordblclick.js b/static/plugin_dbui/src/pgridroweditordblclick.js
index 96ec5021..3f66943d 100644
--- a/static/plugin_dbui/src/pgridroweditordblclick.js
+++ b/static/plugin_dbui/src/pgridroweditordblclick.js
@@ -1,24 +1,16 @@
 /**
- * The row editor doble click plugin
- *
+ * The grid plugin instantiating RowEditor double click.
  * Launch the update action when the user double click on a row.
  *
- * Requires the App.grid.GridRowEditor plugin.
- *
- * The ptype of this component is pGridRowEditorDblClick.
- *
+ * @class App.grid.RowEditorDblClick
  * @extends Object
- * @version
+ * @ptype pGridRowEditorDblClick
  *
+ * @uses App.grid.RowEditor
  */
-
-Ext.namespace('App.grid');
-
 App.grid.RowEditorDblClick = Ext.extend(Object, {
 
-    /**
-     * Private attribute identifying the type of plugin
-     */
+    // Private attribute identifying the type of plugin
     ptype: 'pGridRowEditorDblClick',
 
     /**
@@ -38,12 +30,12 @@ App.grid.RowEditorDblClick = Ext.extend(Object, {
         grid.on('rowdblclick', grid.rowEditor.onEditRow, grid.rowEditor);
     },
 
-    /**
-     * Private method to destroy the plugin
-     * Purge grid listeners associated to the plugin.
-     *
-     * @param {App.grid.Grid} grid
-     */
+    //
+    // Private method to destroy the plugin
+    // Purge grid listeners associated to the plugin.
+    //
+    // @param {App.grid.Grid} grid
+    //
     destroyPlugin: function (grid) {
 
         "use strict";
diff --git a/static/plugin_dbui/src/pgridroweditortoolbar.js b/static/plugin_dbui/src/pgridroweditortoolbar.js
index 804c3d89..8573a4a5 100644
--- a/static/plugin_dbui/src/pgridroweditortoolbar.js
+++ b/static/plugin_dbui/src/pgridroweditortoolbar.js
@@ -1,25 +1,23 @@
 /**
- * Add a toolbar with buttons to manipulate the App.grid.RowEditor.
- * Requires the App.grid.GridRowEditor plugin.
+ * The grid plugin instantiating a toolbar with buttons to manipulate
+ * the App.grid.RowEditor.
  *
- * The ptype of this component is pGridRowEditorToolbar.
+ * @class App.grid.RowEditorToolbar
+ * @extend Object
+ * @ptype pGridRowEditorToolbar
  *
- * @version
+ * @uses App.grid.RowEditor
  *
  */
-Ext.namespace('App.grid');
-
 App.grid.RowEditorToolbar = Ext.extend(Object, {
 
-    /**
-     * Private parameter identifying the type of plugin
-     */
+    // Private parameter identifying the type of plugin
     ptype: 'pGridRowEditorToolbar',
 
     /**
      * Plugin initialization
      *
-     * @param {app.grid.Grid} grid
+     * @param {App.grid.Grid} grid
      */
     init: function (grid) {
 
diff --git a/static/plugin_dbui/src/ppanelmathjax.js b/static/plugin_dbui/src/ppanelmathjax.js
index ea102f48..c2a103f2 100644
--- a/static/plugin_dbui/src/ppanelmathjax.js
+++ b/static/plugin_dbui/src/ppanelmathjax.js
@@ -1,14 +1,12 @@
 /**
  * Plugin to render mathematics formula embedded in HTML content.
- * The processing is performed by MathJax.
- * The MathJax library is loaded by the framework
+ * The processing is performed by the [MathJax](http://www.mathjax.org/) library.
  *
- * @version
+ * @class App.panel.MathJax
+ * @extend Object
+ * @ptype pPanelMathJax
  *
  */
-
-Ext.namespace('App.panel');
-
 App.panel.MathJax = Ext.extend(Object, {
 
     init: function (panel) {
@@ -21,8 +19,8 @@ App.panel.MathJax = Ext.extend(Object, {
     },
 
     /**
-     * Handler to activates the MathJax processing
-     * when the html content of the panel is loaded.
+     * Activate the MathJax processing
+     * when the HTML content of the panel is loaded.
      *
      * @param {Ext.Panel} panel
      */
@@ -33,7 +31,8 @@ App.panel.MathJax = Ext.extend(Object, {
     },
 
     /**
-     * Handler to run the mathJax processing
+     * Run the mathJax processing.
+     *
      * @param {Ext.Element} el
      * @param {Object} o the response object
      */
diff --git a/static/plugin_dbui/src/pregexp.js b/static/plugin_dbui/src/pregexp.js
index 9a57f949..96fa0055 100644
--- a/static/plugin_dbui/src/pregexp.js
+++ b/static/plugin_dbui/src/pregexp.js
@@ -1,17 +1,13 @@
 /**
- * The pRegExp plugin
- *
  * Plugin to replace a string defining a regular expression
  * by a regular expression object.
+ * It can be used by any component using the property *regex*.
  *
- * Can be used with any component using the property regex.
- *
- * The ptype is pRegEx.
+ * @class App.PRegExp
+ * @extend Object
+ * @ptype pRegEx
  *
  */
-
-Ext.namespace('App');
-
 App.PRegExp = Ext.extend(Object, {
 
     init: function (component) {
diff --git a/static/plugin_dbui/src/pviewportlogin.js b/static/plugin_dbui/src/pviewportlogin.js
index 8c8779ed..31fef501 100644
--- a/static/plugin_dbui/src/pviewportlogin.js
+++ b/static/plugin_dbui/src/pviewportlogin.js
@@ -1,28 +1,25 @@
 /**
- * Plugin to add login capabilities to the viewport
- * The ptype of this component is pViewportLogin.
+ * Plugin to add login capabilities to the viewport component.
  *
- * The URL:
- *      login      → /application/admin
- *      Change pwd → /application/default/user/change_password
- *      Logout     → /application/default/user/logout
+ * The URLs:
+ *
+ *      Login           → /application/admin
+ *      Change password → /application/default/user/change_password
+ *      Logout          → /application/default/user/logout
+ *
+ * @class App.ViewportLogin
  * @extends Object
- * @version
+ * @ptype pViewportLogin
+ *
+ * @uses App.Viewport
  *
  */
-
-Ext.namespace('App');
-
 App.ViewportLogin = Ext.extend(Object, {
 
-    /**
-     * Private attribute identifying the type of plugin
-     */
+    // Private attribute identifying the type of plugin
     ptype: 'pViewportLogin',
 
-    /**
-     * Private attributes for internationalization
-     */
+    // Private attributes for internationalization
     textChangePwd: "Change password...",
     textLogin: "Login...",
     textLogout: "Exit the application",
@@ -30,7 +27,8 @@ App.ViewportLogin = Ext.extend(Object, {
 
     /**
      * Plugin initialization
-     * @param {Object} viewport
+     *
+     * @param {App.Viewport} viewport
      */
     init: function (viewport) {
 
@@ -81,8 +79,8 @@ App.ViewportLogin = Ext.extend(Object, {
     /**
      * Open the URL in a new window
      *
-     * @param {String} href
-     * The url is relative to the application, e.g. "controller/function"
+     * @param {String} button.href
+     * The URL is relative to the application, e.g. "controller/function"
      *
      */
     openURL: function (button) {
diff --git a/static/plugin_dbui/src/viewport.js b/static/plugin_dbui/src/viewport.js
index 0a09dcaf..8ff7deb0 100644
--- a/static/plugin_dbui/src/viewport.js
+++ b/static/plugin_dbui/src/viewport.js
@@ -1,36 +1,33 @@
 /**
- * The ViewPort for the application.
- *
- * The type of this component is xviewport.
+ * The ViewPort component for the application.
  *
+ * @class App.Viewport
  * @extends Ext.Viexport
- * @version
+ * @xtype xviewport
  *
  */
-Ext.namespace('App');
-
 App.Viewport = Ext.extend(Ext.Viewport, {
 
     /**
-     * @cfg {array} defaultTabPath
-     * list of node.text attribute defining the path of the node
-     * to be opened at start up
+     * @property {Ext.tree.TreeNode.tex[]} defaultTabPath
+     * The list of node.text attribute defining the path of the node
+     * to be opened at start up.
      */
     defaultTabPath: null,
 
     /**
-     * @cfg {boolean} logged true when the user pass the login procedure
+     * @property {Boolean} logged
+     * The property is true when the user pass the login procedure.
      */
     logged: false,
 
-    /**
-     * private short cuts
-     */
+    // private short cuts
     tabPanel: null,
     treePanel: null,
 
     /**
-     * constructor
+     * @constructor
+     *
      * @param {Object} config
      */
     constructor: function (config) {
@@ -117,9 +114,7 @@ App.Viewport = Ext.extend(Ext.Viewport, {
         loader.on('load', this.onTreeLoaderLoaded, this);
     },
 
-    /**
-     * Private method requires by the Ext JS component model
-     */
+    // Private method requires by the Ext JS component model
     beforeDestroy: function () {
 
         "use strict";
@@ -131,11 +126,10 @@ App.Viewport = Ext.extend(Ext.Viewport, {
     },
 
     /**
-     * Handler to create / activate a tab
-     * The scope is the viewport
+     * Create / activate a tab.
      *
-     * @param {Object} node
-     * @param {Object} event
+     * @param {Ext.tree.TreeNode} node
+     * @param {Ext.EventObject} event
      */
     onCreateTab: function (node, event) {
 
@@ -185,9 +179,8 @@ App.Viewport = Ext.extend(Ext.Viewport, {
     },
 
     /**
-     * Handler to activate the default tab when the tree is loaded
+     * Activate the default tab when the tree is loaded
      * Expand all the nodes,  create the Tab for the leaf, collapse node.
-     * The scope is the ViewPort.
      *
      * @param {Ext.tree.TreeLoader} treeLoader
      * @param {Ext.tree.TreeNode} rootNode
-- 
GitLab