Add the property tabTitleTpl and treePanelTitle to the Viewport class.

static/plugin_dbui/src/viewport/Viewport.js

@@ -33,6 +33,21 @@ Ext.define('App.viewport.Viewport', {
      */
     logged: false,
 
+    /**
+     * @property {String}
+     * The template use to build the title of each tab.
+     * The argument {0} is the name of the node while {1} is the
+     * name of the leaf.
+     */
+    tabTitleTpl: "{0}: {1}",
+
+    /**
+     * @property {String} treePanelTitle
+     * The title of the tree panel.
+     * By default it is the name of the application.
+     */
+    treePanelTitle: undefined,
+
     // private short cuts
     tabPanel: null,
     treePanel: null,
@@ -56,6 +71,11 @@ Ext.define('App.viewport.Viewport', {
             xtype: 'tree'
         };
 
+        // title of the tree panel
+        if (!this.treePanelTitle) {
+            this.treePanelTitle = App.name;
+        }
+
         // predefined configuration of the view port
         viewportCfg = {
             layout: 'border',
@@ -67,6 +87,8 @@ Ext.define('App.viewport.Viewport', {
                 region: 'north',
                 xtype: 'toolbar'
             }, {
+                // autoScroll is mandatory to avoid problem
+                // when the first tab is deleted
                 autoScroll: true,
                 collapsible: true,
                 itemId: 'treePanel',
@@ -74,7 +96,7 @@ Ext.define('App.viewport.Viewport', {
                 rootVisible: false,
                 split: true,
                 store: treeStoreCfg,
-                title: App.name,
+                title: this.treePanelTitle,
                 width: 200,
                 xtype: 'treepanel'
             }, {
@@ -99,6 +121,10 @@ Ext.define('App.viewport.Viewport', {
         // apply the predefined configuration
         Ext.apply(this, viewportCfg);
 
+        // compile template
+        this.tabTitleTpl = Ext.create('Ext.Template', this.tabTitleTpl);
+        this.tabTitleTpl.compile();
+
         //initialise the base class
         this.callParent(arguments);
 
@@ -142,6 +168,7 @@ Ext.define('App.viewport.Viewport', {
         "use strict";
 
         var cfg,
+            li,
             parent,
             tabId,
             wdgcfg,
@@ -188,13 +215,14 @@ Ext.define('App.viewport.Viewport', {
         }
 
         // tab configuration
-        // the title is defined as 'Form tablename', 'Grid tablename', ...
         parent = record.parentNode;
 
+        li = [parent.get("text"), record.get("text")];
+
         cfg = {
             closable: true,
             itemId: tabId,
-            title: parent.get("text") + " " + record.get("text")
+            title: this.tabTitleTpl.apply(li)
         };
 
         // embed single panel in the tab panel