extend: 'Ext.panel.Panel',
alias: 'widget.pvePanelConfig',
- showSearch: true, // add a ressource grid with a search button as first tab
- viewFilter: undefined, // a filter to pass to that ressource grid
+ showSearch: true, // add a resource grid with a search button as first tab
+ viewFilter: undefined, // a filter to pass to that resource grid
+
+ tbarSpacing: true, // if true, adds a spacer after the title in tbar
dockedItems: [{
// this is needed for the overflow handler
overflowHandler: 'scroller',
dock: 'left',
style: {
- backgroundColor: '#f5f5f5',
padding: 0,
- margin: 0
+ margin: 0,
},
+ cls: 'pve-toolbar-bg',
items: {
xtype: 'treelist',
itemId: 'menu',
- ui: 'nav',
+ ui: 'pve-nav',
expanderOnly: true,
expanderFirst: false,
animation: false,
singleExpand: false,
listeners: {
selectionchange: function(treeList, selection) {
- var me = this.up('panel');
- me.suspendLayout = true;
- me.activateCard(selection.data.id);
- me.suspendLayout = false;
- me.updateLayout();
+ if (!selection) {
+ return;
+ }
+ let view = this.up('panel');
+ view.suspendLayout = true;
+ view.activateCard(selection.data.id);
+ view.suspendLayout = false;
+ view.updateLayout();
},
itemclick: function(treelist, info) {
var olditem = treelist.getSelection();
var newitem = info.node;
- // when clicking on the expand arrow,
- // we dont select items, but still want
- // the original behaviour
+ // when clicking on the expand arrow, we don't select items, but still want the original behaviour
if (info.select === false) {
return;
}
- // if you click on a different item which is open,
- // leave it open
- // else toggle the clicked item
+ // click on a different, open item then leave it open, else toggle the clicked item
if (olditem.data.id !== newitem.data.id &&
newitem.data.expanded === true) {
info.toggle = false;
} else {
info.toggle = true;
}
- }
- }
- }
+ },
+ },
+ },
},
{
xtype: 'toolbar',
itemId: 'toolbar',
dock: 'top',
height: 36,
- overflowHandler: 'menu'
+ overflowHandler: 'scroller',
}],
firstItem: '',
layout: 'card',
border: 0,
+ // used for automated test
+ selectById: function(cardid) {
+ var me = this;
+
+ var root = me.store.getRoot();
+ var selection = root.findChild('id', cardid, true);
+
+ if (selection) {
+ selection.expand();
+ var menu = me.down('#menu');
+ menu.setSelection(selection);
+ return cardid;
+ }
+ return '';
+ },
+
activateCard: function(cardid) {
var me = this;
if (me.savedItems[cardid]) {
var curcard = me.getLayout().getActiveItem();
var newcard = me.add(me.savedItems[cardid]);
- me.helpButton.onlineHelp = newcard.onlineHelp || me.onlineHelp;
+ me.helpButton.setOnlineHelp(newcard.onlineHelp || me.onlineHelp);
if (curcard) {
me.setActiveItem(cardid);
me.remove(curcard, true);
var activeTab; // leaving this undefined means items[0] will be the default tab
if (stateid) {
- var state = me.sp.get(stateid);
+ let state = me.sp.get(stateid);
if (state && state.value) {
- // if this tab does not exists, it chooses the first
+ // if this tab does not exist, it chooses the first
activeTab = state.value;
}
}
me.tbar = undefined;
if (!me.onlineHelp) {
- switch(me.pveSelNode.data.id) {
- case 'type/storage':me.onlineHelp = 'chapter-pvesm.html'; break;
- case 'type/qemu':me.onlineHelp = 'chapter-qm.html'; break;
- case 'type/lxc':me.onlineHelp = 'chapter-pct.html'; break;
- case 'type/pool':me.onlineHelp = 'chapter-pveum.html#_pools'; break;
- case 'type/node':me.onlineHelp = 'chapter-sysadmin.html'; break;
- }
+ // use the onlineHelp property indirection to enforce checking reference validity
+ let typeToOnlineHelp = {
+ 'type/lxc': { onlineHelp: 'chapter_pct' },
+ 'type/node': { onlineHelp: 'chapter_system_administration' },
+ 'type/pool': { onlineHelp: 'pveum_pools' },
+ 'type/qemu': { onlineHelp: 'chapter_virtual_machines' },
+ 'type/sdn': { onlineHelp: 'chapter_pvesdn' },
+ 'type/storage': { onlineHelp: 'chapter_storage' },
+ };
+ me.onlineHelp = typeToOnlineHelp[me.pveSelNode.data.id]?.onlineHelp;
}
- tbar.unshift('->');
+ if (me.tbarSpacing) {
+ tbar.unshift('->');
+ }
tbar.unshift({
xtype: 'tbtext',
text: title,
- baseCls: 'x-panel-header-text'
+ baseCls: 'x-panel-header-text',
});
- me.helpButton = Ext.create('PVE.button.Help', {
+ me.helpButton = Ext.create('Proxmox.button.Help', {
hidden: false,
listenToGlobalEvent: false,
- onlineHelp: me.onlineHelp || undefined
+ onlineHelp: me.onlineHelp || undefined,
});
tbar.push(me.helpButton);
me.items = me.items || [];
if (me.showSearch) {
me.items.unshift({
+ xtype: 'pveResourceGrid',
itemId: 'search',
title: gettext('Search'),
iconCls: 'fa fa-search',
- xtype: 'pveResourceGrid',
- pveSelNode: me.pveSelNode
+ pveSelNode: me.pveSelNode,
});
}
me.savedItems = {};
- /*jslint confusion:true*/
if (me.items[0]) {
me.firstItem = me.items[0].itemId;
}
- /*jslint confusion:false*/
me.store = Ext.create('Ext.data.TreeStore', {
root: {
- expanded: true
- }
+ expanded: true,
+ },
});
var root = me.store.getRoot();
- me.items.forEach(function(item){
- var treeitem = Ext.create('Ext.data.TreeModel',{
+ me.insertNodes(me.items);
+
+ delete me.items;
+ me.defaults = me.defaults || {};
+ Ext.apply(me.defaults, {
+ pveSelNode: me.pveSelNode,
+ viewFilter: me.viewFilter,
+ workspace: me.workspace,
+ border: 0,
+ });
+
+ me.callParent();
+
+ var menu = me.down('#menu');
+ var selection = root.findChild('id', activeTab, true) || root.firstChild;
+ var node = selection;
+ while (node !== root) {
+ node.expand();
+ node = node.parentNode;
+ }
+ menu.setStore(me.store);
+ menu.setSelection(selection);
+
+ // on a state change,
+ // select the new item
+ var statechange = function(sp, key, state) {
+ // it the state change is for this panel
+ if (stateid && key === stateid && state) {
+ // get active item
+ var acard = me.getLayout().getActiveItem().itemId;
+ // get the itemid of the new value
+ var ncard = state.value || me.firstItem;
+ if (ncard && acard !== ncard) {
+ // select the chosen item
+ menu.setSelection(root.findChild('id', ncard, true) || root.firstChild);
+ }
+ }
+ };
+
+ if (stateid) {
+ me.mon(me.sp, 'statechange', statechange);
+ }
+ },
+
+ insertNodes: function(items) {
+ var me = this;
+ var root = me.store.getRoot();
+
+ items.forEach(function(item) {
+ var treeitem = Ext.create('Ext.data.TreeModel', {
id: item.itemId,
text: item.title,
iconCls: item.iconCls,
leaf: true,
- expanded: item.expandedOnInit
+ expanded: item.expandedOnInit,
});
item.header = false;
if (me.savedItems[item.itemId] !== undefined) {
throw "id already exists";
}
});
-
- delete me.items;
- me.defaults = me.defaults || {};
- Ext.apply(me.defaults, {
- pveSelNode: me.pveSelNode,
- viewFilter: me.viewFilter,
- workspace: me.workspace,
- border: 0
- });
-
- me.callParent();
-
- var menu = me.down('#menu');
- var selection = root.findChild('id', activeTab, true) || root.firstChild;
- var node = selection;
- while (node !== root) {
- node.expand();
- node = node.parentNode;
- }
- menu.setStore(me.store);
- menu.setSelection(selection);
-
- // on a state change,
- // select the new item
- var statechange = function(sp, key, state) {
- // it the state change is for this panel
- if (stateid && (key === stateid) && state) {
- // get active item
- var acard = me.getLayout().getActiveItem().itemId;
- // get the itemid of the new value
- var ncard = state.value || me.firstItem;
- if (ncard && (acard != ncard)) {
- // select the chosen item
- menu.setSelection(root.findChild('id', ncard, true) || root.firstChild);
- }
- }
- };
-
- if (stateid) {
- me.mon(me.sp, 'statechange', statechange);
- }
- }
+ },
});
projects / pve-manager.git / blobdiff