improve Sonia.navigation package

scm-webapp/src/main/webapp/resources/js/layout.js

@@ -36,8 +36,9 @@ Ext.onReady(function(){
       height: 75
     }), {
       region: 'west',
-      id: 'west-panel', // see Ext.getCmp() below
+      id: 'west', // see Ext.getCmp() below
       title: 'West',
+      xtype: 'navPanel',
       split: true,
       width: 200,
       minSize: 175,
@@ -81,19 +82,26 @@ Ext.onReady(function(){
   }
 
   function createMainMenu(){
-    var panel = Ext.getCmp('west-panel');
-    panel.add({
-      xtype: 'navPanel',
+    var panel = Ext.getCmp('west');
+    panel.addSections([{
       title: 'Main',
-      data: [{
+      items: [{
         label: 'Groups',
         fn: addGroupPanel
       },{
         label: 'Repositories',
         fn: addRepositoryPanel
       }]
-    });
-    panel.doLayout();
+    },{
+      title: 'Config',
+      items: [{
+        label: 'Repositories',
+        fn: null
+      },{
+        label: 'Server',
+        fn: null
+      }]
+    }]);
   }
 
   // create menu after login

scm-webapp/src/main/webapp/resources/js/sonia.navigation.js

@@ -6,7 +6,7 @@
 
 Ext.ns('Sonia.navigation');
 
-Sonia.navigation.NavPanel = Ext.extend(Ext.Panel, {
+Sonia.navigation.NavSection = Ext.extend(Ext.Panel, {
 
   data: null,
 
@@ -25,7 +25,7 @@ Sonia.navigation.NavPanel = Ext.extend(Ext.Panel, {
     }
 
     Ext.apply(this, Ext.apply(this.initialConfig, config));
-    Sonia.navigation.NavPanel.superclass.initComponent.apply(this, arguments);
+    Sonia.navigation.NavSection.superclass.initComponent.apply(this, arguments);
 
   },
 
@@ -35,7 +35,12 @@ Sonia.navigation.NavPanel = Ext.extend(Ext.Panel, {
     var prefix = this.id + '-nav-item-';
     if ( id != null && id.indexOf(prefix) == 0 ){
       var i = parseInt( id.substring( prefix.length ) );
-      this.data[i].fn();
+      var fn = this.data[i].fn;
+      if ( Ext.isFunction( fn ) ){
+        fn();
+      } else if ( debug ){
+        console.debug('fn at "' +  this.data[i].label + '" is not a function');
+      }
     }
   },
 
@@ -63,4 +68,52 @@ Sonia.navigation.NavPanel = Ext.extend(Ext.Panel, {
 
 });
 
+Ext.reg('navSection', Sonia.navigation.NavSection);
+
+Sonia.navigation.NavPanel = Ext.extend(Ext.Panel, {
+
+  sections: null,
+
+  initComponent: function(){
+
+    var config = {
+      listeners: {
+        afterrender: {
+          fn: this.renderSections,
+          scope: this
+        }
+      }
+    };
+
+    Ext.apply(this, Ext.apply(this.initialConfig, config));
+    Sonia.navigation.NavSection.superclass.initComponent.apply(this, arguments);
+  },
+
+  renderSections: function(){
+    if ( this.sections != null ){
+      this.addSections( this.sections );
+    }
+  },
+
+  addSections: function(sections){
+    if ( Ext.isArray( sections ) && sections.length > 0 ){
+      for ( var i=0; i<sections.length; i++ ){
+        this.addSection( sections[i] );
+      }
+    } else {
+      this.addSection( sections );
+    }
+    this.doLayout();
+  },
+
+  addSection: function(section){
+    this.add({
+      xtype: 'navSection',
+      title: section.title,
+      data: section.items
+    });
+  }
+
+});
+
 Ext.reg('navPanel', Sonia.navigation.NavPanel);