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