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         var me = this;
  37
  38         if (Ext.isFunction(me.onGetValues)) {
  39             dirtyOnly = false;
  40         }
  41
  42         var 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         var me = this;
  55         var advItems = me.getComponent('advancedContainer');
  56         if (advItems) {
  57             advItems.setVisible(visible);
  58         }
  59     },
  60
  61     setValues: function(values) {
  62         var me = this;
  63
  64         var form = me.up('form');
  65
  66         Ext.iterate(values, function(fieldId, val) {
  67             var field = me.query('[isFormField][name=' + fieldId + ']')[0];
  68             if (field) {
  69                 field.setValue(val);
  70                 if (form.trackResetOnLoad) {
  71                     field.resetOriginalValue();
  72                 }
  73             }
  74         });
  75     },
  76
  77     initComponent: function() {
  78         var me = this;
  79
  80         var items;
  81
  82         if (me.items) {
  83             me.columns = 1;
  84             items = [
  85                 {
  86                     columnWidth: 1,
  87                     layout: 'anchor',
  88                     items: me.items
  89                 }
  90             ];
  91             me.items = undefined;
  92         } else if (me.column4) {
  93             me.columns = 4;
  94             items = [
  95                 {
  96                     columnWidth: 0.25,
  97                     padding: '0 10 0 0',
  98                     layout: 'anchor',
  99                     items: me.column1
 100                 },
 101                 {
 102                     columnWidth: 0.25,
 103                     padding: '0 10 0 0',
 104                     layout: 'anchor',
 105                     items: me.column2
 106                 },
 107                 {
 108                     columnWidth: 0.25,
 109                     padding: '0 10 0 0',
 110                     layout: 'anchor',
 111                     items: me.column3
 112                 },
 113                 {
 114                     columnWidth: 0.25,
 115                     padding: '0 0 0 10',
 116                     layout: 'anchor',
 117                     items: me.column4
 118                 }
 119             ];
 120             if (me.columnB) {
 121                 items.push({
 122                     columnWidth: 1,
 123                     padding: '10 0 0 0',
 124                     layout: 'anchor',
 125                     items: me.columnB
 126                 });
 127             }
 128         } else if (me.column1) {
 129             me.columns = 2;
 130             items = [
 131                 {
 132                     columnWidth: 0.5,
 133                     padding: '0 10 0 0',
 134                     layout: 'anchor',
 135                     items: me.column1
 136                 },
 137                 {
 138                     columnWidth: 0.5,
 139                     padding: '0 0 0 10',
 140                     layout: 'anchor',
 141                     items: me.column2 || [] // allow empty column
 142                 }
 143             ];
 144             if (me.columnB) {
 145                 items.push({
 146                     columnWidth: 1,
 147                     padding: '10 0 0 0',
 148                     layout: 'anchor',
 149                     items: me.columnB
 150                 });
 151             }
 152         } else {
 153             throw "unsupported config";
 154         }
 155
 156         var advItems;
 157         if (me.advancedItems) {
 158             advItems = [
 159                 {
 160                     columnWidth: 1,
 161                     layout: 'anchor',
 162                     items: me.advancedItems
 163                 }
 164             ];
 165             me.advancedItems = undefined;
 166         } else if (me.advancedColumn1) {
 167             advItems = [
 168                 {
 169                     columnWidth: 0.5,
 170                     padding: '0 10 0 0',
 171                     layout: 'anchor',
 172                     items: me.advancedColumn1
 173                 },
 174                 {
 175                     columnWidth: 0.5,
 176                     padding: '0 0 0 10',
 177                     layout: 'anchor',
 178                     items: me.advancedColumn2 || [] // allow empty column
 179                 }
 180             ];
 181
 182             me.advancedColumn1 = undefined;
 183             me.advancedColumn2 = undefined;
 184
 185             if (me.advancedColumnB) {
 186                 advItems.push({
 187                     columnWidth: 1,
 188                     padding: '10 0 0 0',
 189                     layout: 'anchor',
 190                     items: me.advancedColumnB
 191                 });
 192                 me.advancedColumnB = undefined;
 193             }
 194         }
 195
 196         if (advItems) {
 197             me.hasAdvanced = true;
 198             advItems.unshift({
 199                 columnWidth: 1,
 200                 xtype: 'box',
 201                 hidden: false,
 202                 border: true,
 203                 autoEl: {
 204                     tag: 'hr'
 205                 }
 206             });
 207             items.push({
 208                 columnWidth: 1,
 209                 xtype: 'container',
 210                 itemId: 'advancedContainer',
 211                 hidden: !me.showAdvanced,
 212                 layout: 'column',
 213                 defaults: {
 214                     border: false
 215                 },
 216                 items: advItems
 217             });
 218         }
 219
 220         if (me.useFieldContainer) {
 221             Ext.apply(me, {
 222                 layout: 'fit',
 223                 items: Ext.apply(me.useFieldContainer, {
 224                     layout: 'column',
 225                     defaultType: 'container',
 226                     items: items
 227                 })
 228             });
 229         } else {
 230             Ext.apply(me, {
 231                 layout: 'column',
 232                 defaultType: 'container',
 233                 items: items
 234             });
 235         }
 236
 237         me.callParent();
 238     }
 239 });