]>
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 | ||
a307714b TL |
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 | ||
a46c2eb1 TL |
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: [ | |
a46c2eb1 | 90 | editConfig, |
a307714b | 91 | displayConfig, |
a46c2eb1 TL |
92 | ], |
93 | }); | |
94 | ||
95 | me.callParent(); | |
96 | ||
97 | me.getViewModel().set('editable', me.editable); | |
98 | }, | |
99 | ||
100 | }); |