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