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
  25     layout: 'fit',
  26     defaults: {
  27         hideLabel: true,
  28     },
  29
  30     initComponent: function() {
  31         let me = this;
  32
  33         let displayConfig = {
  34             xtype: me.displayType,
  35             bind: {},
  36         };
  37         Ext.applyIf(displayConfig, me.initialConfig);
  38         delete displayConfig.editConfig;
  39         delete displayConfig.editable;
  40
  41         let editConfig = Ext.apply({}, me.editConfig);
  42         Ext.applyIf(editConfig, {
  43             xtype: 'textfield',
  44             bind: {},
  45         });
  46         Ext.applyIf(editConfig, displayConfig);
  47
  48         Ext.applyIf(displayConfig.bind, {
  49             hidden: '{editable}',
  50             disabled: '{editable}',
  51             value: '{value}',
  52         });
  53         Ext.applyIf(editConfig.bind, {
  54             hidden: '{!editable}',
  55             disabled: '{!editable}',
  56             value: '{value}',
  57         });
  58
  59         // avoid glitch, start off correct even before viewmodel fixes it
  60         editConfig.disabled = editConfig.hidden = !me.editable;
  61         displayConfig.disabled = displayConfig.hidden = !!me.editable;
  62
  63         editConfig.name = displayConfig.name = me.name;
  64
  65         Ext.apply(me, {
  66             items: [
  67                 editConfig,
  68                 displayConfig,
  69             ],
  70         });
  71
  72         me.callParent();
  73
  74         me.getViewModel().set('editable', me.editable);
  75     },
  76
  77 });