js/ConfigPanel.js

   1 /*
   2  * Base class for all the multitab config panels
   3  *
   4  * How to use this:
   5  *
   6  * You create a subclass of this, and then define your wanted tabs
   7  * as items like this:
   8  *
   9  * items: [{
  10  *  title: "myTitle",
  11  *  xytpe: "somextype",
  12  *  iconCls: 'fa fa-icon',
  13  *  groups: ['somegroup'],
  14  *  expandedOnInit: true,
  15  *  itemId: 'someId'
  16  * }]
  17  *
  18  * this has to be in the declarative syntax, else we
  19  * cannot save them for later
  20  * (so no Ext.create or Ext.apply of an item in the subclass)
  21  *
  22  * the groups array expects the itemids of the items
  23  * which are the parents, which have to come before they
  24  * are used
  25  *
  26  * if you want following the tree:
  27  *
  28  * Option1
  29  * Option2
  30  *   -> SubOption1
  31  *      -> SubSubOption1
  32  *
  33  * the suboption1 group array has to look like this:
  34  * groups: ['itemid-of-option2']
  35  *
  36  * and of subsuboption1:
  37  * groups: ['itemid-of-option2', 'itemid-of-suboption1']
  38  *
  39  * setting the expandedOnInit determines if the item/group is expanded
  40  * initially (false by default)
  41  */
  42 Ext.define('PMG.panel.Config', {
  43     extend: 'Ext.panel.Panel',
  44     alias: 'widget.pmgPanelConfig',
  45
  46     viewFilter: undefined, // a filter to pass to that ressource grid
  47
  48     dockedItems: [{
  49         // this is needed for the overflow handler
  50         xtype: 'toolbar',
  51         overflowHandler: 'scroller',
  52         dock: 'left',
  53         style: {
  54             backgroundColor: '#f5f5f5',
  55             padding: 0,
  56             margin: 0,
  57         },
  58         items: {
  59             xtype: 'treelist',
  60             itemId: 'menu',
  61             ui: 'nav',
  62             expanderOnly: true,
  63             expanderFirst: false,
  64             animation: false,
  65             singleExpand: false,
  66             listeners: {
  67                 selectionchange: function(treeList, selection) {
  68                     let view = this.up('panel');
  69                     view.suspendLayout = true;
  70                     view.activateCard(selection.data.id);
  71                     view.suspendLayout = false;
  72                     view.updateLayout();
  73                 },
  74                 itemclick: function(treelist, info) {
  75                     var olditem = treelist.getSelection();
  76                     var newitem = info.node;
  77
  78                     // when clicking on the expand arrow,
  79                     // we dont select items, but still want
  80                     // the original behaviour
  81                     if (info.select === false) {
  82                         return;
  83                     }
  84
  85                     // if you click on a different item which is open,
  86                     // leave it open
  87                     // else toggle the clicked item
  88                     if (olditem.data.id !== newitem.data.id &&
  89                         newitem.data.expanded === true) {
  90                         info.toggle = false;
  91                     } else {
  92                         info.toggle = true;
  93                     }
  94                 },
  95             },
  96         },
  97     }],
  98
  99     firstItem: '',
 100     layout: 'card',
 101     border: 0,
 102
 103     // used for automated test
 104     selectById: function(cardid) {
 105         var me = this;
 106
 107         var root = me.store.getRoot();
 108         var selection = root.findChild('id', cardid, true);
 109
 110         if (selection) {
 111             selection.expand();
 112             var menu = me.down('#menu');
 113             menu.setSelection(selection);
 114             return cardid;
 115         }
 116         return null;
 117     },
 118
 119     activateCard: function(cardid) {
 120         var me = this;
 121         if (me.savedItems[cardid]) {
 122             var curcard = me.getLayout().getActiveItem();
 123             me.add(me.savedItems[cardid]);
 124             if (curcard) {
 125                 me.setActiveItem(cardid);
 126                 me.remove(curcard, true);
 127
 128                 // trigger state change
 129
 130                 var ncard = cardid;
 131                 // Note: '' is alias for first tab.
 132                 // First tab can be 'search' or something else
 133                 if (cardid === me.firstItem) {
 134                     ncard = '';
 135                 }
 136                 if (me.hstateid) {
 137                    me.sp.set(me.hstateid, { value: ncard });
 138                 }
 139             }
 140         }
 141     },
 142
 143     initComponent: function() {
 144         var me = this;
 145
 146         var stateid = me.hstateid;
 147
 148         me.sp = Ext.state.Manager.getProvider();
 149
 150         var activeTab; // leaving this undefined means items[0] will be the default tab
 151
 152         if (stateid) {
 153             var state = me.sp.get(stateid);
 154             if (state && state.value) {
 155                 // if this tab does not exists, it chooses the first
 156                 activeTab = state.value;
 157             }
 158         }
 159
 160         // include search tab
 161         me.items = me.items || [];
 162
 163         me.savedItems = {};
 164         if (me.items[0]) {
 165             me.firstItem = me.items[0].itemId;
 166         }
 167
 168         me.store = Ext.create('Ext.data.TreeStore', {
 169             root: {
 170                 expanded: true,
 171             },
 172         });
 173         var root = me.store.getRoot();
 174         me.items.forEach(function(item) {
 175             var treeitem = Ext.create('Ext.data.TreeModel', {
 176                 id: item.itemId,
 177                 text: item.title,
 178                 iconCls: item.iconCls,
 179                 leaf: true,
 180                 expanded: item.expandedOnInit,
 181             });
 182             item.header = false;
 183             if (me.savedItems[item.itemId] !== undefined) {
 184                 throw "itemId already exists, please use another";
 185             }
 186             me.savedItems[item.itemId] = item;
 187
 188             var group;
 189             var curnode = root;
 190
 191             // get/create the group items
 192             while (Ext.isArray(item.groups) && item.groups.length > 0) {
 193                 group = item.groups.shift();
 194
 195                 var child = curnode.findChild('id', group);
 196                 if (child === null) {
 197                     // did not find the group item
 198                     // so add it where we are
 199                     break;
 200                 }
 201                 curnode = child;
 202             }
 203
 204             // insert the item
 205
 206             // lets see if it already exists
 207             var node = curnode.findChild('id', item.itemId);
 208
 209             if (node === null) {
 210                 curnode.appendChild(treeitem);
 211             } else {
 212                 // should not happen!
 213                 throw "id already exists";
 214             }
 215         });
 216
 217         delete me.items;
 218         me.defaults = me.defaults || {};
 219         Ext.apply(me.defaults, {
 220             viewFilter: me.viewFilter,
 221             border: 0,
 222         });
 223
 224         me.callParent();
 225
 226         var menu = me.down('#menu');
 227         var selection = root.findChild('id', activeTab, true) || root.firstChild;
 228         var node = selection;
 229         while (node !== root) {
 230             node.expand();
 231             node = node.parentNode;
 232         }
 233         menu.setStore(me.store);
 234         menu.setSelection(selection);
 235
 236         // on a state change,
 237         // select the new item
 238         const statechange = function(sp, key, newState) {
 239             // it the state change is for this panel
 240             if (stateid && (key === stateid) && newState) {
 241                 // get active item
 242                 var acard = me.getLayout().getActiveItem().itemId;
 243                 // get the itemid of the new value
 244                 var ncard = newState.value || me.firstItem;
 245                 if (ncard && (acard !== ncard)) {
 246                     // select the chosen item
 247                     menu.setSelection(root.findChild('id', ncard, true) || root.firstChild);
 248                 }
 249             }
 250         };
 251
 252         if (stateid) {
 253             me.mon(me.sp, 'statechange', statechange);
 254         }
 255     },
 256 });