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         return 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         // FIXME: add return, but check all use-sites for regressions then
  41         vm.get('value');
  42     },
  43
  44     layout: 'fit',
  45     defaults: {
  46         hideLabel: true,
  47     },
  48
  49     initComponent: function() {
  50         let me = this;
  51
  52         let displayConfig = {
  53             xtype: me.displayType,
  54             bind: {},
  55         };
  56         Ext.applyIf(displayConfig, me.initialConfig);
  57         delete displayConfig.editConfig;
  58         delete displayConfig.editable;
  59
  60         let editConfig = Ext.apply({}, me.editConfig);
  61         Ext.applyIf(editConfig, {
  62             xtype: 'textfield',
  63             bind: {},
  64         });
  65         Ext.applyIf(editConfig, displayConfig);
  66
  67         if (me.initialConfig && me.initialConfig.displayConfig) {
  68             Ext.applyIf(displayConfig, me.initialConfig.displayConfig);
  69             delete displayConfig.displayConfig;
  70         }
  71
  72         Ext.applyIf(displayConfig, {
  73             renderer: v => Ext.htmlEncode(v),
  74         });
  75
  76         Ext.applyIf(displayConfig.bind, {
  77             hidden: '{editable}',
  78             disabled: '{editable}',
  79             value: '{value}',
  80         });
  81         Ext.applyIf(editConfig.bind, {
  82             hidden: '{!editable}',
  83             disabled: '{!editable}',
  84             value: '{value}',
  85         });
  86
  87         // avoid glitch, start off correct even before viewmodel fixes it
  88         editConfig.disabled = editConfig.hidden = !me.editable;
  89         displayConfig.disabled = displayConfig.hidden = !!me.editable;
  90
  91         editConfig.name = displayConfig.name = me.name;
  92
  93         Ext.apply(me, {
  94             items: [
  95                 editConfig,
  96                 displayConfig,
  97             ],
  98         });
  99
 100         me.callParent();
 101
 102         me.getViewModel().set('editable', me.editable);
 103     },
 104
 105 });