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     initComponent: function() {
  80         let me = this;
  81
  82         let items;
  83
  84         if (me.items) {
  85             items = [
  86                 {
  87                     layout: 'anchor',
  88                     items: me.items,
  89                 },
  90             ];
  91             me.items = undefined;
  92         } else if (me.column4) {
  93             items = [
  94                 {
  95                     layout: 'hbox',
  96                     defaults: {
  97                         border: false,
  98                         layout: 'anchor',
  99                         flex: 1,
 100                     },
 101                     items: [
 102                         {
 103                             padding: '0 10 0 0',
 104                             items: me.column1,
 105                         },
 106                         {
 107                             padding: '0 10 0 0',
 108                             items: me.column2,
 109                         },
 110                         {
 111                             padding: '0 10 0 0',
 112                             items: me.column3,
 113                         },
 114                         {
 115                             padding: '0 0 0 10',
 116                             items: me.column4,
 117                         },
 118                     ],
 119                 },
 120             ];
 121             if (me.columnB) {
 122                 items.push({
 123                     padding: '10 0 0 0',
 124                     layout: 'anchor',
 125                     items: me.columnB,
 126                 });
 127             }
 128         } else if (me.column1) {
 129             items = [
 130                 {
 131                     layout: 'hbox',
 132                     defaults: {
 133                         border: false,
 134                         layout: 'anchor',
 135                         flex: 1,
 136                     },
 137                     items: [
 138                         {
 139                             padding: '0 10 0 0',
 140                             items: me.column1,
 141                         },
 142                         {
 143                             padding: '0 0 0 10',
 144                             items: me.column2 || [], // allow empty column
 145                         },
 146                     ],
 147                 },
 148             ];
 149             if (me.columnB) {
 150                 items.push({
 151                     padding: '10 0 0 0',
 152                     layout: 'anchor',
 153                     items: me.columnB,
 154                 });
 155             }
 156         } else {
 157             throw "unsupported config";
 158         }
 159
 160         let advItems;
 161         if (me.advancedItems) {
 162             advItems = [
 163                 {
 164                     layout: 'anchor',
 165                     items: me.advancedItems,
 166                 },
 167             ];
 168             me.advancedItems = undefined;
 169         } else if (me.advancedColumn1) {
 170             advItems = [
 171                 {
 172                     layout: {
 173                         type: 'hbox',
 174                         align: 'begin',
 175                     },
 176                     defaults: {
 177                         border: false,
 178                         layout: 'anchor',
 179                         flex: 1,
 180                     },
 181                     items: [
 182                         {
 183                             padding: '0 10 0 0',
 184                             items: me.advancedColumn1,
 185                         },
 186                         {
 187                             padding: '0 0 0 10',
 188                             items: me.advancedColumn2 || [], // allow empty column
 189                         },
 190                     ],
 191                 },
 192             ];
 193
 194             me.advancedColumn1 = undefined;
 195             me.advancedColumn2 = undefined;
 196
 197             if (me.advancedColumnB) {
 198                 advItems.push({
 199                     padding: '10 0 0 0',
 200                     layout: 'anchor',
 201                     items: me.advancedColumnB,
 202                 });
 203                 me.advancedColumnB = undefined;
 204             }
 205         }
 206
 207         if (advItems) {
 208             me.hasAdvanced = true;
 209             advItems.unshift({
 210                 xtype: 'box',
 211                 hidden: false,
 212                 border: true,
 213                 autoEl: {
 214                     tag: 'hr',
 215                 },
 216             });
 217             items.push({
 218                 xtype: 'container',
 219                 itemId: 'advancedContainer',
 220                 hidden: !me.showAdvanced,
 221                 defaults: {
 222                     border: false,
 223                 },
 224                 items: advItems,
 225             });
 226         }
 227
 228         if (me.useFieldContainer) {
 229             Ext.apply(me, {
 230                 layout: 'fit',
 231                 items: Ext.apply(me.useFieldContainer, {
 232                     layout: 'column',
 233                     defaultType: 'container',
 234                     items: items,
 235                 }),
 236             });
 237         } else {
 238             Ext.apply(me, {
 239                 layout: {
 240                     type: 'vbox',
 241                     align: 'stretch',
 242                 },
 243                 defaultType: 'container',
 244                 items: items,
 245             });
 246         }
 247
 248         me.callParent();
 249     },
 250 });