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('pveShowHelp', this.onlineHelp);
   9             }
  10         },
  11         deactivate: function() {
  12             if (this.onlineHelp) {
  13                 Ext.GlobalEvents.fireEvent('pveHideHelp', 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     // overwrite this to modify submit data
  24     onGetValues: function(values) {
  25         return values;
  26     },
  27
  28     getValues: function(dirtyOnly) {
  29         var me = this;
  30
  31         if (Ext.isFunction(me.onGetValues)) {
  32             dirtyOnly = false;
  33         }
  34
  35         var values = {};
  36
  37         Ext.Array.each(me.query('[isFormField]'), function(field) {
  38             if (!dirtyOnly || field.isDirty()) {
  39                 Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
  40             }
  41         });
  42
  43         return me.onGetValues(values);
  44     },
  45
  46     setValues: function(values) {
  47         var me = this;
  48
  49         var form = me.up('form');
  50
  51         Ext.iterate(values, function(fieldId, val) {
  52             var field = me.query('[isFormField][name=' + fieldId + ']')[0];
  53             if (field) {
  54                 field.setValue(val);
  55                 if (form.trackResetOnLoad) {
  56                     field.resetOriginalValue();
  57                 }
  58             }
  59         });
  60     },
  61
  62     initComponent: function() {
  63         var me = this;
  64
  65         var items;
  66
  67         if (me.items) {
  68             me.columns = 1;
  69             items = [
  70                 {
  71                     columnWidth: 1,
  72                     layout: 'anchor',
  73                     items: me.items
  74                 }
  75             ];
  76             me.items = undefined;
  77         } else if (me.column4) {
  78             me.columns = 4;
  79             items = [
  80                 {
  81                     columnWidth: 0.25,
  82                     padding: '0 10 0 0',
  83                     layout: 'anchor',
  84                     items: me.column1
  85                 },
  86                 {
  87                     columnWidth: 0.25,
  88                     padding: '0 10 0 0',
  89                     layout: 'anchor',
  90                     items: me.column2
  91                 },
  92                 {
  93                     columnWidth: 0.25,
  94                     padding: '0 10 0 0',
  95                     layout: 'anchor',
  96                     items: me.column3
  97                 },
  98                 {
  99                     columnWidth: 0.25,
 100                     padding: '0 0 0 10',
 101                     layout: 'anchor',
 102                     items: me.column4
 103                 }
 104             ];
 105             if (me.columnB) {
 106                 items.push({
 107                     columnWidth: 1,
 108                     padding: '10 0 0 0',
 109                     layout: 'anchor',
 110                     items: me.columnB
 111                 });
 112             }
 113         } else if (me.column1) {
 114             me.columns = 2;
 115             items = [
 116                 {
 117                     columnWidth: 0.5,
 118                     padding: '0 10 0 0',
 119                     layout: 'anchor',
 120                     items: me.column1
 121                 },
 122                 {
 123                     columnWidth: 0.5,
 124                     padding: '0 0 0 10',
 125                     layout: 'anchor',
 126                     items: me.column2 || [] // allow empty column
 127                 }
 128             ];
 129             if (me.columnB) {
 130                 items.push({
 131                     columnWidth: 1,
 132                     padding: '10 0 0 0',
 133                     layout: 'anchor',
 134                     items: me.columnB
 135                 });
 136             }
 137         } else {
 138             throw "unsupported config";
 139         }
 140
 141         if (me.useFieldContainer) {
 142             Ext.apply(me, {
 143                 layout: 'fit',
 144                 items: Ext.apply(me.useFieldContainer, {
 145                     layout: 'column',
 146                     defaultType: 'container',
 147                     items: items
 148                 })
 149             });
 150         } else {
 151             Ext.apply(me, {
 152                 layout: 'column',
 153                 defaultType: 'container',
 154                 items: items
 155             });
 156         }
 157
 158         me.callParent();
 159     }
 160 });