src/form/DisplayEdit.js

   1 Ext.define('Proxmox.form.field.DisplayEdit', {
   2     extend: 'Ext.form.FieldContainer',
   3     alias: 'widget.pmxDisplayEditField',
   4
   5     viewModel: {
   6         parent: null,
   7         data: {
   8             editable: false,
   9             value: undefined,
  10         },
  11     },
  12
  13     displayType: 'displayfield',
  14
  15     editConfig: {},
  16     editable: false,
  17     setEditable: function(editable) {
  18         let me = this;
  19         let vm = me.getViewModel();
  20
  21         me.editable = editable;
  22         vm.set('editable', editable);
  23     },
  24     getEditable: function() {
  25         let me = this;
  26         let vm = me.getViewModel();
  27         vm.get('editable');
  28     },
  29
  30     setValue: function(value) {
  31         let me = this;
  32         let vm = me.getViewModel();
  33
  34         me.value = value;
  35         vm.set('value', value);
  36     },
  37     getValue: function() {
  38         let me = this;
  39         let vm = me.getViewModel();
  40         vm.get('value');
  41     },
  42
  43     layout: 'fit',
  44     defaults: {
  45         hideLabel: true,
  46     },
  47
  48     initComponent: function() {
  49         let me = this;
  50
  51         let displayConfig = {
  52             xtype: me.displayType,
  53             bind: {},
  54         };
  55         Ext.applyIf(displayConfig, me.initialConfig);
  56         delete displayConfig.editConfig;
  57         delete displayConfig.editable;
  58
  59         let editConfig = Ext.apply({}, me.editConfig);
  60         Ext.applyIf(editConfig, {
  61             xtype: 'textfield',
  62             bind: {},
  63         });
  64         Ext.applyIf(editConfig, displayConfig);
  65
  66         if (me.initialConfig && me.initialConfig.displayConfig) {
  67             Ext.applyIf(displayConfig, me.initialConfig.displayConfig);
  68             delete displayConfig.displayConfig;
  69         }
  70
  71         Ext.applyIf(displayConfig.bind, {
  72             hidden: '{editable}',
  73             disabled: '{editable}',
  74             value: '{value}',
  75         });
  76         Ext.applyIf(editConfig.bind, {
  77             hidden: '{!editable}',
  78             disabled: '{!editable}',
  79             value: '{value}',
  80         });
  81
  82         // avoid glitch, start off correct even before viewmodel fixes it
  83         editConfig.disabled = editConfig.hidden = !me.editable;
  84         displayConfig.disabled = displayConfig.hidden = !!me.editable;
  85
  86         editConfig.name = displayConfig.name = me.name;
  87
  88         Ext.apply(me, {
  89             items: [
  90                 editConfig,
  91                 displayConfig,
  92             ],
  93         });
  94
  95         me.callParent();
  96
  97         me.getViewModel().set('editable', me.editable);
  98     },
  99
 100 });