]>
git.proxmox.com Git - pmg-gui.git/blob - js/ConfigPanel.js
2 * Base class for all the multitab config panels.
3 * Usage: You'd create a subclass of this, and then define your wanted tabs as items like this:
8 * iconCls: 'fa fa-icon',
9 * groups: ['somegroup'],
10 * expandedOnInit: true,
14 * this has to be in the declarative syntax, else we cannot save them for later (so no Ext.create
15 * or Ext.apply of an item in the subclass)
17 * the groups array expects the itemids of the items which are the parents, which have to come
18 * before they are used.
20 * If you want following the tree:
26 * then the suboption1 group array has to look like this:
27 * groups: ['itemid-of-option2']
29 * and the subsuboption1 one:
30 * groups: ['itemid-of-option2', 'itemid-of-suboption1']
32 * setting the expandedOnInit determines if the item/group is expanded initially (false by default)
34 Ext
.define('PMG.panel.Config', {
35 extend
: 'Ext.panel.Panel',
36 alias
: 'widget.pmgPanelConfig',
38 viewFilter
: undefined, // a filter to pass to that ressource grid
41 // this is needed for the overflow handler
43 overflowHandler
: 'scroller',
46 backgroundColor
: '#f5f5f5',
59 selectionchange: function(treeList
, selection
) {
60 let view
= this.up('panel');
61 view
.suspendLayout
= true;
62 view
.activateCard(selection
.data
.id
);
63 view
.suspendLayout
= false;
66 itemclick: function(treelist
, info
) {
67 var olditem
= treelist
.getSelection();
68 var newitem
= info
.node
;
70 // don't select when clicking on the expand arrow, but still want the original behavior
71 if (info
.select
=== false) {
75 // if a different open item is clicked, leave it open, else toggle the clicked item
76 if (olditem
.data
.id
!== newitem
.data
.id
&&
77 newitem
.data
.expanded
=== true) {
91 // used for automated test
92 selectById: function(cardid
) {
95 var root
= me
.store
.getRoot();
96 var selection
= root
.findChild('id', cardid
, true);
100 var menu
= me
.down('#menu');
101 menu
.setSelection(selection
);
107 activateCard: function(cardid
) {
109 if (me
.savedItems
[cardid
]) {
110 var curcard
= me
.getLayout().getActiveItem();
111 me
.add(me
.savedItems
[cardid
]);
113 me
.setActiveItem(cardid
);
114 me
.remove(curcard
, true);
116 // trigger state change
119 // Note: '' is alias for first tab. First tab can be 'search' or something else
120 if (cardid
=== me
.firstItem
) {
124 me
.sp
.set(me
.hstateid
, { value
: ncard
});
130 initComponent: function() {
133 var stateid
= me
.hstateid
;
135 me
.sp
= Ext
.state
.Manager
.getProvider();
137 var activeTab
; // leaving this undefined means items[0] will be the default tab
140 var state
= me
.sp
.get(stateid
);
141 if (state
&& state
.value
) {
142 // if this tab does not exists, it chooses the first
143 activeTab
= state
.value
;
147 // include search tab
148 me
.items
= me
.items
|| [];
152 me
.firstItem
= me
.items
[0].itemId
;
155 me
.store
= Ext
.create('Ext.data.TreeStore', {
160 var root
= me
.store
.getRoot();
161 me
.items
.forEach(function(item
) {
162 var treeitem
= Ext
.create('Ext.data.TreeModel', {
165 iconCls
: item
.iconCls
,
167 expanded
: item
.expandedOnInit
,
170 if (me
.savedItems
[item
.itemId
] !== undefined) {
171 throw "itemId already exists, please use another";
173 me
.savedItems
[item
.itemId
] = item
;
178 // get/create the group items
179 while (Ext
.isArray(item
.groups
) && item
.groups
.length
> 0) {
180 group
= item
.groups
.shift();
182 var child
= curnode
.findChild('id', group
);
183 if (child
=== null) {
184 // did not find the group item so add it where we are
190 // lets see if it already exists
191 var node
= curnode
.findChild('id', item
.itemId
);
194 curnode
.appendChild(treeitem
); // insert the item
196 // should not happen!
197 throw "id already exists";
202 me
.defaults
= me
.defaults
|| {};
203 Ext
.apply(me
.defaults
, {
204 viewFilter
: me
.viewFilter
,
210 var menu
= me
.down('#menu');
211 var selection
= root
.findChild('id', activeTab
, true) || root
.firstChild
;
212 var node
= selection
;
213 while (node
!== root
) {
215 node
= node
.parentNode
;
217 menu
.setStore(me
.store
);
218 menu
.setSelection(selection
);
220 // on a state change select the new item
221 const statechange = function(sp
, key
, newState
) {
222 // it the state change is for this panel
223 if (stateid
&& (key
=== stateid
) && newState
) {
225 var acard
= me
.getLayout().getActiveItem().itemId
;
226 // get the itemid of the new value
227 var ncard
= newState
.value
|| me
.firstItem
;
228 if (ncard
&& (acard
!== ncard
)) {
229 // select the chosen item
230 menu
.setSelection(root
.findChild('id', ncard
, true) || root
.firstChild
);
236 me
.mon(me
.sp
, 'statechange', statechange
);