/*
- * Base class for all the multitab config panels
- *
- * How to use this:
- *
- * You create a subclass of this, and then define your wanted tabs
- * as items like this:
+ * Base class for all the multitab config panels.
+ * Usage: You'd create a subclass of this, and then define your wanted tabs as items like this:
*
* items: [{
* title: "myTitle",
* itemId: 'someId'
* }]
*
- * this has to be in the declarative syntax, else we
- * cannot save them for later
- * (so no Ext.create or Ext.apply of an item in the subclass)
+ * this has to be in the declarative syntax, else we cannot save them for later (so no Ext.create
+ * or Ext.apply of an item in the subclass)
*
- * the groups array expects the itemids of the items
- * which are the parents, which have to come before they
- * are used
+ * the groups array expects the itemids of the items which are the parents, which have to come
+ * before they are used.
*
- * if you want following the tree:
+ * If you want following the tree:
+ * Option1
+ * Option2
+ * -> SubOption1
+ * -> SubSubOption1
*
- * Option1
- * Option2
- * -> SubOption1
- * -> SubSubOption1
+ * then the suboption1 group array has to look like this:
+ * groups: ['itemid-of-option2']
*
- * the suboption1 group array has to look like this:
- * groups: ['itemid-of-option2']
+ * and the subsuboption1 one:
+ * groups: ['itemid-of-option2', 'itemid-of-suboption1']
*
- * and of subsuboption1:
- * groups: ['itemid-of-option2', 'itemid-of-suboption1']
- *
- * setting the expandedOnInit determines if the item/group is expanded
- * initially (false by default)
+ * setting the expandedOnInit determines if the item/group is expanded initially (false by default)
*/
Ext.define('PMG.panel.Config', {
extend: 'Ext.panel.Panel',
style: {
backgroundColor: '#f5f5f5',
padding: 0,
- margin: 0
+ margin: 0,
},
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();
+ 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
+ // don't select when clicking on the expand arrow, but still want the original behavior
if (info.select === false) {
return;
}
- // if you click on a different item which is open,
- // leave it open
- // else toggle the clicked item
+ // if a different open item is clicked, 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;
}
- }
- }
- }
+ },
+ },
+ },
}],
firstItem: '',
menu.setSelection(selection);
return cardid;
}
+ return null;
},
activateCard: function(cardid) {
var me = this;
if (me.savedItems[cardid]) {
var curcard = me.getLayout().getActiveItem();
- var newcard = me.add(me.savedItems[cardid]);
+ me.add(me.savedItems[cardid]);
if (curcard) {
me.setActiveItem(cardid);
me.remove(curcard, true);
// trigger state change
var ncard = cardid;
- // Note: '' is alias for first tab.
- // First tab can be 'search' or something else
+ // Note: '' is alias for first tab. First tab can be 'search' or something else
if (cardid === me.firstItem) {
ncard = '';
}
}
}
- // get title
- var title = me.title;
- me.title = undefined;
-
- // create toolbar
- //var tbar = me.tbar || [];
- //me.tbar = undefined;
-
- //tbar.unshift('->');
- //tbar.unshift({
- // xtype: 'tbtext',
- // text: title,
- // baseCls: 'x-panel-header-text'
- //});
-
- //me.dockedItems[1].items = tbar;
-
// include search tab
me.items = me.items || [];
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.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) {
var child = curnode.findChild('id', group);
if (child === null) {
- // did not find the group item
- // so add it where we are
+ // did not find the group item so add it where we are
break;
}
curnode = child;
}
- // insert the item
-
// lets see if it already exists
var node = curnode.findChild('id', item.itemId);
if (node === null) {
- curnode.appendChild(treeitem);
+ curnode.appendChild(treeitem); // insert the item
} else {
// should not happen!
throw "id already exists";
me.defaults = me.defaults || {};
Ext.apply(me.defaults, {
viewFilter: me.viewFilter,
- border: 0
+ border: 0,
});
me.callParent();
menu.setStore(me.store);
menu.setSelection(selection);
- // on a state change,
- // select the new item
- var statechange = function(sp, key, state) {
+ // on a state change select the new item
+ const statechange = function(sp, key, newState) {
// it the state change is for this panel
- if (stateid && (key === stateid) && state) {
+ if (stateid && (key === stateid) && newState) {
// 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)) {
+ var ncard = newState.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 / pmg-gui.git / blobdiff