]>
Commit | Line | Data |
---|---|---|
a46c2eb1 TL |
1 | Ext.define('Proxmox.form.field.DisplayEdit', { |
2 | extend: 'Ext.form.FieldContainer', | |
a307714b | 3 | alias: 'widget.pmxDisplayEditField', |
a46c2eb1 TL |
4 | |
5 | viewModel: { | |
a307714b | 6 | parent: null, |
a46c2eb1 TL |
7 | data: { |
8 | editable: false, | |
a307714b | 9 | value: undefined, |
a46c2eb1 TL |
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 | }, | |
41cf4ae1 TL |
24 | getEditable: function() { |
25 | let me = this; | |
26 | let vm = me.getViewModel(); | |
15f0d995 | 27 | return vm.get('editable'); |
41cf4ae1 TL |
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(); | |
15f0d995 | 40 | // FIXME: add return, but check all use-sites for regressions then |
41cf4ae1 TL |
41 | vm.get('value'); |
42 | }, | |
a46c2eb1 | 43 | |
187e9a6d | 44 | layout: 'fit', |
a46c2eb1 | 45 | defaults: { |
01031528 | 46 | hideLabel: true, |
a46c2eb1 TL |
47 | }, |
48 | ||
a46c2eb1 TL |
49 | initComponent: function() { |
50 | let me = this; | |
51 | ||
52 | let displayConfig = { | |
53 | xtype: me.displayType, | |
a307714b | 54 | bind: {}, |
a46c2eb1 TL |
55 | }; |
56 | Ext.applyIf(displayConfig, me.initialConfig); | |
57 | delete displayConfig.editConfig; | |
58 | delete displayConfig.editable; | |
59 | ||
a307714b | 60 | let editConfig = Ext.apply({}, me.editConfig); |
a46c2eb1 TL |
61 | Ext.applyIf(editConfig, { |
62 | xtype: 'textfield', | |
a307714b | 63 | bind: {}, |
a46c2eb1 TL |
64 | }); |
65 | Ext.applyIf(editConfig, displayConfig); | |
66 | ||
26f17eb1 TL |
67 | if (me.initialConfig && me.initialConfig.displayConfig) { |
68 | Ext.applyIf(displayConfig, me.initialConfig.displayConfig); | |
69 | delete displayConfig.displayConfig; | |
70 | } | |
71 | ||
6b70ca84 TL |
72 | Ext.applyIf(displayConfig, { |
73 | renderer: v => Ext.htmlEncode(v), | |
74 | }); | |
75 | ||
a307714b TL |
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 | ||
a46c2eb1 TL |
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: [ | |
a46c2eb1 | 95 | editConfig, |
a307714b | 96 | displayConfig, |
a46c2eb1 TL |
97 | ], |
98 | }); | |
99 | ||
100 | me.callParent(); | |
101 | ||
102 | me.getViewModel().set('editable', me.editable); | |
103 | }, | |
104 | ||
105 | }); |