[pve-devel] [PATCH 07/18] add navigation tree

Dominik Csapak d.csapak at proxmox.com
Tue Apr 4 13:48:47 CEST 2017


this is a treelist with a store where we can define the structure of
the navigation on the left

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 js/NavigationTree.js | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 142 insertions(+)
 create mode 100644 js/NavigationTree.js

diff --git a/js/NavigationTree.js b/js/NavigationTree.js
new file mode 100644
index 0000000..39b9d3d
--- /dev/null
+++ b/js/NavigationTree.js
@@ -0,0 +1,142 @@
+Ext.define('PMG.store.NavigationStore', {
+    extend: 'Ext.data.TreeStore',
+
+    storeId: 'NavigationStore',
+
+    root: {
+	expanded: true,
+	children: [
+	    {
+		text: gettext('Dashboard'),
+		iconCls: 'fa fa-tachometer',
+		path: 'pmgDashboard',
+		leaf: true
+	    },
+	    {
+		text: gettext('Mail Filter'),
+		iconCls: 'fa fa-envelope',
+		path: 'pmgRuleConfiguration',
+		expanded: true,
+		children: [
+		    {
+			text: gettext('Action Objects'),
+			iconCls: 'fa fa-flag',
+			path: 'pmgActionList',
+			leaf: true,
+		    },
+		    {
+			text: gettext('Who Objects'),
+			iconCls: 'fa fa-user-circle',
+			path: 'pmgWhoConfiguration',
+			leaf: true,
+		    },
+		    {
+			text: gettext('What Objects'),
+			iconCls: 'fa fa-cube',
+			path: 'pmgWhatConfiguration',
+			leaf: true,
+		    },
+		    {
+			text: gettext('When Objects'),
+			iconCls: 'fa fa-clock-o',
+			path: 'pmgWhenConfiguration',
+			leaf: true,
+		    }
+		]
+	    },
+	    {
+		text: gettext('Configuration'),
+		iconCls: 'fa fa-gears',
+		path: 'pmgSystemConfiguration',
+		expanded: true,
+		children: [
+		    {
+			text: gettext('Mail Proxy'),
+			iconCls: 'fa fa-envelope-o',
+			path: 'pmgMailProxyConfiguration',
+			leaf: true,
+		    },
+		    {
+			text: gettext('Spam Detector'),
+			iconCls: 'fa fa-bullhorn',
+			path: 'pmgSpamDetectorConfiguration',
+			leaf: true,
+		    },
+		    {
+			text: gettext('Virus Detector'),
+			iconCls: 'fa fa-bug',
+			path: 'pmgVirusDetectorConfiguration',
+			leaf: true,
+		    },
+		    {
+			text: gettext('User Management'),
+			iconCls: 'fa fa-users',
+			path: 'pmgUserManagement',
+			leaf: true,
+		    },
+		    {
+			text: gettext('Cluster'),
+			iconCls: 'fa fa-server',
+			path: 'pmgCluster',
+			leaf: true,
+		    },
+		    {
+			text: gettext('License'),
+			iconCls: 'fa fa-ticket',
+			path: 'pmgLicense',
+			leaf: true,
+		    }
+		]
+	    },
+	    {
+		text: gettext('Administration'),
+		iconCls: 'fa fa-wrench',
+		path: 'pmgServerAdministration',
+		expanded: true,
+		children: [
+		    {
+			text: gettext('Statistics'),
+			iconCls: 'fa fa-bar-chart',
+			path: 'pmgStatistics',
+			leaf: true,
+		    },
+		    {
+			text: gettext('Quarantine'),
+			iconCls: 'fa fa-cubes',
+			path: 'pmgQuarantine',
+			leaf: true,
+		    },
+		    {
+			text: gettext('Tracking Center'),
+			iconCls: 'fa fa-map-o',
+			path: 'pmgTrackingCenter',
+			leaf: true,
+		    },
+		    {
+			text: gettext('Queues'),
+			iconCls: 'fa fa-bars',
+			path: 'pmgQueueAdministration',
+			leaf: true,
+		    }
+		]
+	    }
+	]
+    }
+});
+
+Ext.define('PMG.view.main.NavigationTree', {
+    extend: 'Ext.list.Tree',
+    xtype: 'navigationtree',
+
+    select: function(path) {
+	var me = this;
+	var item = me.getStore().findRecord('path', path, 0, false, true, true);
+	me.setSelection(item);
+    },
+
+    animation: false,
+    expanderOnly: true,
+    expanderFirst: false,
+    store: 'NavigationStore',
+    ui: 'nav'
+});
-- 
2.11.0





More information about the pve-devel mailing list