add advanced options to the input panel

with this, you can now put items in the
advancedColumn1/2/B and show/hide it with
setAdvancedVisible

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/panel/InputPanel.js b/panel/InputPanel.js
index e3a2520e931af632e6c2e210b5c8aeab7189cafd..4bc5777bdb41321cb868c18e8fc689d157832aeb 100644 (file)
--- a/panel/InputPanel.js
+++ b/panel/InputPanel.js
@@ -20,6 +20,13 @@ Ext.define('Proxmox.panel.InputPanel', {
     // setting this will display a help button in our parent panel
     onlineHelp: undefined,
 
+    // will be set if the inputpanel has advanced items
+    hasAdvanced: false,
+
+    // if the panel has advanced items,
+    // this will determine if they are shown by default
+    showAdvanced: false,
+
     // overwrite this to modify submit data
     onGetValues: function(values) {
        return values;
@@ -43,6 +50,14 @@ Ext.define('Proxmox.panel.InputPanel', {
        return me.onGetValues(values);
     },
 
+    setAdvancedVisible: function(visible) {
+       var me = this;
+       var advItems = me.getComponent('advancedContainer');
+       if (advItems) {
+           advItems.setVisible(visible);
+       }
+    },
+
     setValues: function(values) {
        var me = this;
 
@@ -138,6 +153,70 @@ Ext.define('Proxmox.panel.InputPanel', {
            throw "unsupported config";
        }
 
+       var advItems;
+       if (me.advancedItems) {
+           advItems = [
+               {
+                   columnWidth: 1,
+                   layout: 'anchor',
+                   items: me.advancedItems
+               }
+           ];
+           me.advancedItems = undefined;
+       } else if (me.advancedColumn1) {
+           advItems = [
+               {
+                   columnWidth: 0.5,
+                   padding: '0 10 0 0',
+                   layout: 'anchor',
+                   items: me.advancedColumn1
+               },
+               {
+                   columnWidth: 0.5,
+                   padding: '0 0 0 10',
+                   layout: 'anchor',
+                   items: me.advancedColumn2 || [] // allow empty column
+               }
+           ];
+
+           me.advancedColumn1 = undefined;
+           me.advancedColumn2 = undefined;
+
+           if (me.advancedColumnB) {
+               advItems.push({
+                   columnWidth: 1,
+                   padding: '10 0 0 0',
+                   layout: 'anchor',
+                   items: me.advancedColumnB
+               });
+               me.advancedColumnB = undefined;
+           }
+       }
+
+       if (advItems) {
+           me.hasAdvanced = true;
+           advItems.unshift({
+               columnWidth: 1,
+               xtype: 'box',
+               hidden: false,
+               border: true,
+               autoEl: {
+                   tag: 'hr'
+               }
+           });
+           items.push({
+               columnWidth: 1,
+               xtype: 'container',
+               itemId: 'advancedContainer',
+               hidden: !me.showAdvanced,
+               layout: 'column',
+               defaults: {
+                   border: false
+               },
+               items: advItems
+           });
+       }
+
        if (me.useFieldContainer) {
            Ext.apply(me, {
                layout: 'fit',