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