]>
Commit | Line | Data |
---|---|---|
89796c1a DM |
1 | Ext.define('Proxmox.panel.InputPanel', { |
2 | extend: 'Ext.panel.Panel', | |
3 | alias: ['widget.inputpanel'], | |
4 | listeners: { | |
5 | activate: function() { | |
6 | // notify owning container that it should display a help button | |
7 | if (this.onlineHelp) { | |
4b23ab88 | 8 | Ext.GlobalEvents.fireEvent('proxmoxShowHelp', this.onlineHelp); |
89796c1a DM |
9 | } |
10 | }, | |
11 | deactivate: function() { | |
12 | if (this.onlineHelp) { | |
4b23ab88 | 13 | Ext.GlobalEvents.fireEvent('proxmoxHideHelp', this.onlineHelp); |
89796c1a DM |
14 | } |
15 | } | |
16 | }, | |
17 | border: false, | |
18 | ||
19 | // override this with an URL to a relevant chapter of the pve manual | |
20 | // setting this will display a help button in our parent panel | |
21 | onlineHelp: undefined, | |
22 | ||
33a4fc35 DC |
23 | // will be set if the inputpanel has advanced items |
24 | hasAdvanced: false, | |
25 | ||
26 | // if the panel has advanced items, | |
27 | // this will determine if they are shown by default | |
28 | showAdvanced: false, | |
29 | ||
89796c1a DM |
30 | // overwrite this to modify submit data |
31 | onGetValues: function(values) { | |
32 | return values; | |
33 | }, | |
34 | ||
35 | getValues: function(dirtyOnly) { | |
36 | var me = this; | |
37 | ||
38 | if (Ext.isFunction(me.onGetValues)) { | |
39 | dirtyOnly = false; | |
40 | } | |
41 | ||
42 | var values = {}; | |
43 | ||
44 | Ext.Array.each(me.query('[isFormField]'), function(field) { | |
45 | if (!dirtyOnly || field.isDirty()) { | |
46 | Proxmox.Utils.assemble_field_data(values, field.getSubmitData()); | |
47 | } | |
48 | }); | |
49 | ||
50 | return me.onGetValues(values); | |
51 | }, | |
52 | ||
33a4fc35 DC |
53 | setAdvancedVisible: function(visible) { |
54 | var me = this; | |
55 | var advItems = me.getComponent('advancedContainer'); | |
56 | if (advItems) { | |
57 | advItems.setVisible(visible); | |
58 | } | |
59 | }, | |
60 | ||
89796c1a DM |
61 | setValues: function(values) { |
62 | var me = this; | |
63 | ||
64 | var form = me.up('form'); | |
65 | ||
66 | Ext.iterate(values, function(fieldId, val) { | |
67 | var field = me.query('[isFormField][name=' + fieldId + ']')[0]; | |
68 | if (field) { | |
69 | field.setValue(val); | |
70 | if (form.trackResetOnLoad) { | |
71 | field.resetOriginalValue(); | |
72 | } | |
73 | } | |
74 | }); | |
75 | }, | |
76 | ||
77 | initComponent: function() { | |
78 | var me = this; | |
79 | ||
80 | var items; | |
81 | ||
82 | if (me.items) { | |
83 | me.columns = 1; | |
84 | items = [ | |
85 | { | |
86 | columnWidth: 1, | |
87 | layout: 'anchor', | |
88 | items: me.items | |
89 | } | |
90 | ]; | |
91 | me.items = undefined; | |
cc315e82 DM |
92 | } else if (me.column4) { |
93 | me.columns = 4; | |
94 | items = [ | |
95 | { | |
96 | columnWidth: 0.25, | |
97 | padding: '0 10 0 0', | |
98 | layout: 'anchor', | |
99 | items: me.column1 | |
100 | }, | |
101 | { | |
102 | columnWidth: 0.25, | |
103 | padding: '0 10 0 0', | |
104 | layout: 'anchor', | |
105 | items: me.column2 | |
106 | }, | |
107 | { | |
108 | columnWidth: 0.25, | |
109 | padding: '0 10 0 0', | |
110 | layout: 'anchor', | |
111 | items: me.column3 | |
112 | }, | |
113 | { | |
114 | columnWidth: 0.25, | |
115 | padding: '0 0 0 10', | |
116 | layout: 'anchor', | |
117 | items: me.column4 | |
118 | } | |
119 | ]; | |
120 | if (me.columnB) { | |
121 | items.push({ | |
122 | columnWidth: 1, | |
123 | padding: '10 0 0 0', | |
124 | layout: 'anchor', | |
125 | items: me.columnB | |
126 | }); | |
127 | } | |
89796c1a DM |
128 | } else if (me.column1) { |
129 | me.columns = 2; | |
130 | items = [ | |
131 | { | |
132 | columnWidth: 0.5, | |
133 | padding: '0 10 0 0', | |
134 | layout: 'anchor', | |
135 | items: me.column1 | |
136 | }, | |
137 | { | |
138 | columnWidth: 0.5, | |
139 | padding: '0 0 0 10', | |
140 | layout: 'anchor', | |
141 | items: me.column2 || [] // allow empty column | |
142 | } | |
143 | ]; | |
144 | if (me.columnB) { | |
145 | items.push({ | |
146 | columnWidth: 1, | |
147 | padding: '10 0 0 0', | |
148 | layout: 'anchor', | |
149 | items: me.columnB | |
150 | }); | |
151 | } | |
152 | } else { | |
153 | throw "unsupported config"; | |
154 | } | |
155 | ||
33a4fc35 DC |
156 | var advItems; |
157 | if (me.advancedItems) { | |
158 | advItems = [ | |
159 | { | |
160 | columnWidth: 1, | |
161 | layout: 'anchor', | |
162 | items: me.advancedItems | |
163 | } | |
164 | ]; | |
165 | me.advancedItems = undefined; | |
166 | } else if (me.advancedColumn1) { | |
167 | advItems = [ | |
168 | { | |
169 | columnWidth: 0.5, | |
170 | padding: '0 10 0 0', | |
171 | layout: 'anchor', | |
172 | items: me.advancedColumn1 | |
173 | }, | |
174 | { | |
175 | columnWidth: 0.5, | |
176 | padding: '0 0 0 10', | |
177 | layout: 'anchor', | |
178 | items: me.advancedColumn2 || [] // allow empty column | |
179 | } | |
180 | ]; | |
181 | ||
182 | me.advancedColumn1 = undefined; | |
183 | me.advancedColumn2 = undefined; | |
184 | ||
185 | if (me.advancedColumnB) { | |
186 | advItems.push({ | |
187 | columnWidth: 1, | |
188 | padding: '10 0 0 0', | |
189 | layout: 'anchor', | |
190 | items: me.advancedColumnB | |
191 | }); | |
192 | me.advancedColumnB = undefined; | |
193 | } | |
194 | } | |
195 | ||
196 | if (advItems) { | |
197 | me.hasAdvanced = true; | |
198 | advItems.unshift({ | |
199 | columnWidth: 1, | |
200 | xtype: 'box', | |
201 | hidden: false, | |
202 | border: true, | |
203 | autoEl: { | |
204 | tag: 'hr' | |
205 | } | |
206 | }); | |
207 | items.push({ | |
208 | columnWidth: 1, | |
209 | xtype: 'container', | |
210 | itemId: 'advancedContainer', | |
211 | hidden: !me.showAdvanced, | |
212 | layout: 'column', | |
213 | defaults: { | |
214 | border: false | |
215 | }, | |
216 | items: advItems | |
217 | }); | |
218 | } | |
219 | ||
89796c1a DM |
220 | if (me.useFieldContainer) { |
221 | Ext.apply(me, { | |
222 | layout: 'fit', | |
223 | items: Ext.apply(me.useFieldContainer, { | |
224 | layout: 'column', | |
225 | defaultType: 'container', | |
226 | items: items | |
227 | }) | |
228 | }); | |
229 | } else { | |
230 | Ext.apply(me, { | |
231 | layout: 'column', | |
232 | defaultType: 'container', | |
233 | items: items | |
234 | }); | |
235 | } | |
236 | ||
237 | me.callParent(); | |
238 | } | |
239 | }); |