src/panel/InputPanel.js

   1 Ext.define('Proxmox.panel.InputPanel', {
   2     extend: 'Ext.panel.Panel',
   3     alias: ['widget.inputpanel'],
   4     listeners: {
   5         activate: function() {
   6             // notify owning container that it should display a help button
   7             if (this.onlineHelp) {
   8                 Ext.GlobalEvents.fireEvent('proxmoxShowHelp', this.onlineHelp);
   9             }
  10         },
  11         deactivate: function() {
  12             if (this.onlineHelp) {
  13                 Ext.GlobalEvents.fireEvent('proxmoxHideHelp', this.onlineHelp);
  14             }
  15         },
  16     },
  17     border: false,
  18
  19     // override this with an URL to a relevant chapter of the pve manual
  20     // setting this will display a help button in our parent panel
  21     onlineHelp: undefined,
  22
  23     // will be set if the inputpanel has advanced items
  24     hasAdvanced: false,
  25
  26     // if the panel has advanced items,
  27     // this will determine if they are shown by default
  28     showAdvanced: false,
  29
  30     // overwrite this to modify submit data
  31     onGetValues: function(values) {
  32         return values;
  33     },
  34
  35     getValues: function(dirtyOnly) {
  36         let me = this;
  37
  38         if (Ext.isFunction(me.onGetValues)) {
  39             dirtyOnly = false;
  40         }
  41
  42         let values = {};
  43
  44         Ext.Array.each(me.query('[isFormField]'), function(field) {
  45             if (!dirtyOnly || field.isDirty()) {
  46                 Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
  47             }
  48         });
  49
  50         return me.onGetValues(values);
  51     },
  52
  53     setAdvancedVisible: function(visible) {
  54         let me = this;
  55         let advItems = me.getComponent('advancedContainer');
  56         if (advItems) {
  57             advItems.setVisible(visible);
  58         }
  59     },
  60
  61     setValues: function(values) {
  62         let me = this;
  63
  64         let form = me.up('form');
  65
  66         Ext.iterate(values, function(fieldId, val) {
  67             let fields = me.query('[isFormField][name=' + fieldId + ']');
  68             for (const field of fields) {
  69                 if (field) {
  70                     field.setValue(val);
  71                     if (form.trackResetOnLoad) {
  72                         field.resetOriginalValue();
  73                     }
  74                 }
  75             }
  76         });
  77     },
  78
  79     /**
  80      *  inputpanel, vbox
  81      * +---------------------------------------------------------------------+
  82      * |                             columnT                                 |
  83      * +---------------------------------------------------------------------+
  84      * |                          container, hbox                            |
  85      * |  +---------------+---------------+---------------+---------------+  |
  86      * |  |    column1    |    column2    |    column3    |    column4    |  |
  87      * |  | panel, anchor | panel, anchor | panel, anchor | panel, anchor |  |
  88      * |  +---------------+---------------+---------------+---------------+  |
  89      * +---------------------------------------------------------------------+
  90      * |                             columnB                                 |
  91      * +---------------------------------------------------------------------+
  92      */
  93     initComponent: function() {
  94         let me = this;
  95
  96         let items;
  97
  98         if (me.items) {
  99             items = [
 100                 {
 101                     layout: 'anchor',
 102                     items: me.items,
 103                 },
 104             ];
 105             me.items = undefined;
 106         } else if (me.column4) {
 107             items = [];
 108             if (me.columnT) {
 109                 items.push({
 110                     padding: '0 0 0 0',
 111                     layout: 'anchor',
 112                     items: me.columnT,
 113                 });
 114             }
 115             items.push(
 116                 {
 117                     layout: 'hbox',
 118                     defaults: {
 119                         border: false,
 120                         layout: 'anchor',
 121                         flex: 1,
 122                     },
 123                     items: [
 124                         {
 125                             padding: '0 10 0 0',
 126                             items: me.column1,
 127                         },
 128                         {
 129                             padding: '0 10 0 0',
 130                             items: me.column2,
 131                         },
 132                         {
 133                             padding: '0 10 0 0',
 134                             items: me.column3,
 135                         },
 136                         {
 137                             padding: '0 0 0 10',
 138                             items: me.column4,
 139                         },
 140                     ],
 141                 },
 142             );
 143             if (me.columnB) {
 144                 items.push({
 145                     padding: '10 0 0 0',
 146                     layout: 'anchor',
 147                     items: me.columnB,
 148                 });
 149             }
 150         } else if (me.column1) {
 151             items = [];
 152             if (me.columnT) {
 153                 items.push({
 154                     padding: '0 0 10 0',
 155                     layout: 'anchor',
 156                     items: me.columnT,
 157                 });
 158             }
 159             items.push(
 160                 {
 161                     layout: 'hbox',
 162                     defaults: {
 163                         border: false,
 164                         layout: 'anchor',
 165                         flex: 1,
 166                     },
 167                     items: [
 168                         {
 169                             padding: '0 10 0 0',
 170                             items: me.column1,
 171                         },
 172                         {
 173                             padding: '0 0 0 10',
 174                             items: me.column2 || [], // allow empty column
 175                         },
 176                     ],
 177                 },
 178             );
 179             if (me.columnB) {
 180                 items.push({
 181                     padding: '10 0 0 0',
 182                     layout: 'anchor',
 183                     items: me.columnB,
 184                 });
 185             }
 186         } else {
 187             throw "unsupported config";
 188         }
 189
 190         let advItems;
 191         if (me.advancedItems) {
 192             advItems = [
 193                 {
 194                     layout: 'anchor',
 195                     items: me.advancedItems,
 196                 },
 197             ];
 198             me.advancedItems = undefined;
 199         } else if (me.advancedColumn1 || me.advancedColumn2 || me.advancedColumnB) {
 200             advItems = [
 201                 {
 202                     layout: {
 203                         type: 'hbox',
 204                         align: 'begin',
 205                     },
 206                     defaults: {
 207                         border: false,
 208                         layout: 'anchor',
 209                         flex: 1,
 210                     },
 211                     items: [
 212                         {
 213                             padding: '0 10 0 0',
 214                             items: me.advancedColumn1 || [], // allow empty column
 215                         },
 216                         {
 217                             padding: '0 0 0 10',
 218                             items: me.advancedColumn2 || [], // allow empty column
 219                         },
 220                     ],
 221                 },
 222             ];
 223
 224             me.advancedColumn1 = undefined;
 225             me.advancedColumn2 = undefined;
 226
 227             if (me.advancedColumnB) {
 228                 advItems.push({
 229                     padding: '10 0 0 0',
 230                     layout: 'anchor',
 231                     items: me.advancedColumnB,
 232                 });
 233                 me.advancedColumnB = undefined;
 234             }
 235         }
 236
 237         if (advItems) {
 238             me.hasAdvanced = true;
 239             advItems.unshift({
 240                 xtype: 'box',
 241                 hidden: false,
 242                 border: true,
 243                 autoEl: {
 244                     tag: 'hr',
 245                 },
 246             });
 247             items.push({
 248                 xtype: 'container',
 249                 itemId: 'advancedContainer',
 250                 hidden: !me.showAdvanced,
 251                 defaults: {
 252                     border: false,
 253                 },
 254                 items: advItems,
 255             });
 256         }
 257
 258         Ext.apply(me, {
 259             layout: {
 260                 type: 'vbox',
 261                 align: 'stretch',
 262             },
 263             defaultType: 'container',
 264             items: items,
 265         });
 266
 267         me.callParent();
 268     },
 269 });