added Sonia.navigation.NavPanel

scm-webapp/src/main/webapp/index.html

@@ -14,6 +14,7 @@
 
     <script type="text/javascript" src="resources/js/global.js"></script>
     <script type="text/javascript" src="resources/js/sonia.rest.js"></script>
+    <script type="text/javascript" src="resources/js/sonia.navigation.js"></script>
     <script type="text/javascript" src="resources/js/sonia.login.js"></script>
     <script type="text/javascript" src="resources/js/sonia.group.js"></script>
     <script type="text/javascript" src="resources/js/sonia.repository.js"></script>
@@ -39,12 +40,6 @@
 
     </div>
     <div id="west" class="x-hide-display">
-      <ul id="main-menu" />
-    </div>
-    <div id="settings">
-      <ul>
-        <li><a href="#">Test</a></li>
-      </ul>
     </div>
     <div id="repository-tab" class="x-hide-display">
       <h1>SCM Managers</h1>

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

@@ -43,22 +43,7 @@ Ext.onReady(function(){
       minSize: 175,
       maxSize: 400,
       collapsible: true,
-      margins: '0 0 0 5',
-      layout: {
-        type: 'accordion',
-        animate: true
-      },
-      items: [{
-        contentEl: 'west',
-        title: 'Navigation',
-        border: false,
-        iconCls: 'nav' // see the HEAD section for style used
-      }, {
-        title: 'Settings',
-        contentEl: 'settings',
-        border: false,
-        iconCls: 'settings'
-      }]
+      margins: '0 0 0 5'
     },
     new Ext.BoxComponent({
       region: 'south',
@@ -96,21 +81,19 @@ Ext.onReady(function(){
   }
 
   function createMainMenu(){
-    var menu = Ext.get( 'main-menu' );
-    
-    var groupsLink = menu.createChild({
-      tag: 'li',
-      html: 'Groups',
-      style: 'cursor: pointer;'
+    var panel = Ext.getCmp('west-panel');
+    panel.add({
+      xtype: 'navPanel',
+      title: 'Main',
+      data: [{
+        label: 'Groups',
+        fn: addGroupPanel
+      },{
+        label: 'Repositories',
+        fn: addRepositoryPanel
+      }]
     });
-    groupsLink.on('click', addGroupPanel);
-
-    var repositoryLink = menu.createChild({
-      tag: 'li',
-      html: 'Repositories',
-      style: 'cursor: pointer;'
-    });
-    repositoryLink.on('click', addRepositoryPanel);
+    panel.doLayout();
   }
 
   // create menu after login

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

@@ -0,0 +1,66 @@
+/* 
+ * To change this template, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+
+Ext.ns('Sonia.navigation');
+
+Sonia.navigation.NavPanel = Ext.extend(Ext.Panel, {
+
+  data: null,
+
+  initComponent: function(){
+
+    var config = {
+      frame: true,
+      collapsible:true,
+      style: 'margin: 5px',
+      listeners: {
+        afterrender: {
+          fn: this.renderMenu,
+          scope: this
+        }
+      }
+    }
+
+    Ext.apply(this, Ext.apply(this.initialConfig, config));
+    Sonia.navigation.NavPanel.superclass.initComponent.apply(this, arguments);
+
+  },
+
+  onItemClick: function(e, t){
+    var target = Ext.get(t);
+    var id = target.id;
+    var prefix = this.id + '-nav-item-';
+    if ( id != null && id.indexOf(prefix) == 0 ){
+      var i = parseInt( id.substring( prefix.length ) );
+      this.data[i].fn();
+    }
+  },
+
+  renderMenu: function(){
+    if ( Ext.isArray( this.data ) && this.data.length > 0 ){
+      var links = [];
+      for ( var i=0; i<this.data.length; i++ ){
+        var item = this.data[i];
+        var link = {
+          tag: 'li',
+          cls: 'nav-item',
+          id: this.id + '-nav-item-' + i,
+          html: item.label,
+          style: 'cursor: pointer;'
+        };
+        links.push(link);  
+      }
+
+      var dh = Ext.DomHelper;
+      var list = dh.append(this.body, {tag: 'ul', cls: 'nav-list'}, true);
+      dh.append(list, links);
+      list.on('click', this.onItemClick, this);
+    }
+  }
+
+});
+
+Ext.reg('navPanel', Sonia.navigation.NavPanel);