]>
Commit | Line | Data |
---|---|---|
06694509 DM |
1 | /* Renders a list of key values objets |
2 | ||
3 | mandatory config parameters: | |
4 | rows: an object container where each propery is a key-value object we want to render | |
5 | var rows = { | |
6 | keyboard: { | |
7 | header: gettext('Keyboard Layout'), | |
8 | editor: 'Your.KeyboardEdit', | |
9 | required: true | |
10 | }, | |
11 | ||
12 | optional: | |
13 | disabled: setting this parameter to true will disable selection and focus on the | |
14 | proxmoxObjectGrid as well as greying out input elements. | |
15 | Useful for a readonly tabular display | |
16 | ||
17 | */ | |
18 | ||
19 | Ext.define('Proxmox.grid.ObjectGrid', { | |
20 | extend: 'Ext.grid.GridPanel', | |
21 | alias: ['widget.proxmoxObjectGrid'], | |
22 | disabled: false, | |
23 | hideHeaders: true, | |
24 | ||
4297e795 DM |
25 | monStoreErrors: false, |
26 | ||
8f7370ee DM |
27 | add_combobox_row: function(name, text, opts) { |
28 | var me = this; | |
29 | ||
30 | opts = opts || {}; | |
31 | me.rows = me.rows || {}; | |
32 | ||
33 | me.rows[name] = { | |
34 | required: true, | |
35 | defaultValue: opts.defaultValue, | |
36 | header: text, | |
37 | renderer: opts.renderer, | |
38 | editor: { | |
39 | xtype: 'proxmoxWindowEdit', | |
40 | subject: text, | |
37d8d602 DC |
41 | fieldDefaults: { |
42 | labelWidth: opts.labelWidth || 100 | |
43 | }, | |
8f7370ee DM |
44 | items: { |
45 | xtype: 'proxmoxKVComboBox', | |
46 | name: name, | |
47 | comboItems: opts.comboItems, | |
48 | value: opts.defaultValue, | |
49 | deleteEmpty: opts.deleteEmpty ? true : false, | |
50 | emptyText: opts.defaultValue, | |
51 | labelWidth: Proxmox.Utils.compute_min_label_width( | |
52 | text, opts.labelWidth), | |
53 | fieldLabel: text | |
54 | } | |
55 | } | |
56 | }; | |
57 | }, | |
58 | ||
5dea30d0 DM |
59 | add_text_row: function(name, text, opts) { |
60 | var me = this; | |
61 | ||
62 | opts = opts || {}; | |
c2ea0137 | 63 | me.rows = me.rows || {}; |
5dea30d0 DM |
64 | |
65 | me.rows[name] = { | |
66 | required: true, | |
67 | defaultValue: opts.defaultValue, | |
68 | header: text, | |
69 | renderer: opts.renderer, | |
70 | editor: { | |
71 | xtype: 'proxmoxWindowEdit', | |
72 | subject: text, | |
37d8d602 DC |
73 | fieldDefaults: { |
74 | labelWidth: opts.labelWidth || 100 | |
75 | }, | |
5dea30d0 DM |
76 | items: { |
77 | xtype: 'proxmoxtextfield', | |
78 | name: name, | |
8f7370ee | 79 | deleteEmpty: opts.deleteEmpty ? true : false, |
5dea30d0 DM |
80 | emptyText: opts.defaultValue, |
81 | labelWidth: Proxmox.Utils.compute_min_label_width( | |
82 | text, opts.labelWidth), | |
85d85d15 | 83 | vtype: opts.vtype, |
5dea30d0 DM |
84 | fieldLabel: text |
85 | } | |
86 | } | |
87 | }; | |
88 | }, | |
89 | ||
0e49da6d DM |
90 | add_boolean_row: function(name, text, opts) { |
91 | var me = this; | |
92 | ||
93 | opts = opts || {}; | |
c2ea0137 | 94 | me.rows = me.rows || {}; |
0e49da6d | 95 | |
0e49da6d DM |
96 | me.rows[name] = { |
97 | required: true, | |
98 | defaultValue: opts.defaultValue || 0, | |
99 | header: text, | |
100 | renderer: opts.renderer || Proxmox.Utils.format_boolean, | |
101 | editor: { | |
102 | xtype: 'proxmoxWindowEdit', | |
103 | subject: text, | |
37d8d602 DC |
104 | fieldDefaults: { |
105 | labelWidth: opts.labelWidth || 100 | |
106 | }, | |
0e49da6d DM |
107 | items: { |
108 | xtype: 'proxmoxcheckbox', | |
109 | name: name, | |
110 | uncheckedValue: 0, | |
111 | defaultValue: opts.defaultValue || 0, | |
112 | checked: opts.defaultValue ? true : false, | |
113 | deleteDefaultValue: opts.deleteDefaultValue ? true : false, | |
28e54f37 DM |
114 | labelWidth: Proxmox.Utils.compute_min_label_width( |
115 | text, opts.labelWidth), | |
0e49da6d DM |
116 | fieldLabel: text |
117 | } | |
118 | } | |
119 | }; | |
120 | }, | |
121 | ||
122 | add_integer_row: function(name, text, opts) { | |
123 | var me = this; | |
124 | ||
125 | opts = opts || {} | |
c2ea0137 | 126 | me.rows = me.rows || {}; |
0e49da6d | 127 | |
0e49da6d DM |
128 | me.rows[name] = { |
129 | required: true, | |
130 | defaultValue: opts.defaultValue, | |
131 | header: text, | |
0d5c5e14 | 132 | renderer: opts.renderer, |
0e49da6d DM |
133 | editor: { |
134 | xtype: 'proxmoxWindowEdit', | |
135 | subject: text, | |
37d8d602 DC |
136 | fieldDefaults: { |
137 | labelWidth: opts.labelWidth || 100 | |
138 | }, | |
0e49da6d DM |
139 | items: { |
140 | xtype: 'proxmoxintegerfield', | |
141 | name: name, | |
142 | minValue: opts.minValue, | |
143 | maxValue: opts.maxValue, | |
144 | emptyText: gettext('Default'), | |
8f7370ee | 145 | deleteEmpty: opts.deleteEmpty ? true : false, |
0e49da6d | 146 | value: opts.defaultValue, |
28e54f37 DM |
147 | labelWidth: Proxmox.Utils.compute_min_label_width( |
148 | text, opts.labelWidth), | |
0e49da6d DM |
149 | fieldLabel: text |
150 | } | |
151 | } | |
152 | }; | |
153 | }, | |
154 | ||
7ec6cd9e DM |
155 | editorConfig: {}, // default config passed to editor |
156 | ||
157 | run_editor: function() { | |
158 | var me = this; | |
159 | ||
160 | var sm = me.getSelectionModel(); | |
161 | var rec = sm.getSelection()[0]; | |
162 | if (!rec) { | |
163 | return; | |
164 | } | |
165 | ||
166 | var rows = me.rows; | |
167 | var rowdef = rows[rec.data.key]; | |
168 | if (!rowdef.editor) { | |
169 | return; | |
170 | } | |
171 | ||
172 | var win; | |
173 | var config; | |
174 | if (Ext.isString(rowdef.editor)) { | |
175 | config = Ext.apply({ | |
176 | confid: rec.data.key, | |
177 | }, me.editorConfig); | |
178 | win = Ext.create(rowdef.editor, config); | |
179 | } else { | |
180 | config = Ext.apply({ | |
181 | confid: rec.data.key, | |
182 | }, me.editorConfig); | |
183 | Ext.apply(config, rowdef.editor); | |
184 | win = Ext.createWidget(rowdef.editor.xtype, config); | |
185 | win.load(); | |
186 | } | |
187 | ||
188 | win.show(); | |
189 | win.on('destroy', me.reload, me); | |
190 | }, | |
191 | ||
192 | reload: function() { | |
193 | var me = this; | |
194 | me.rstore.load(); | |
195 | }, | |
196 | ||
06694509 DM |
197 | getObjectValue: function(key, defaultValue) { |
198 | var me = this; | |
199 | var rec = me.store.getById(key); | |
200 | if (rec) { | |
201 | return rec.data.value; | |
202 | } | |
203 | return defaultValue; | |
204 | }, | |
205 | ||
206 | renderKey: function(key, metaData, record, rowIndex, colIndex, store) { | |
207 | var me = this; | |
208 | var rows = me.rows; | |
209 | var rowdef = (rows && rows[key]) ? rows[key] : {}; | |
210 | return rowdef.header || key; | |
211 | }, | |
212 | ||
213 | renderValue: function(value, metaData, record, rowIndex, colIndex, store) { | |
214 | var me = this; | |
215 | var rows = me.rows; | |
216 | var key = record.data.key; | |
217 | var rowdef = (rows && rows[key]) ? rows[key] : {}; | |
218 | ||
219 | var renderer = rowdef.renderer; | |
220 | if (renderer) { | |
221 | return renderer(value, metaData, record, rowIndex, colIndex, store); | |
222 | } | |
223 | ||
224 | return value; | |
225 | }, | |
226 | ||
9307eda4 | 227 | listeners: { |
ce9a0f27 | 228 | itemkeydown: function(view, record, item, index, e) { |
9307eda4 | 229 | if (e.getKey() === e.ENTER) { |
ce9a0f27 DC |
230 | this.pressedIndex = index; |
231 | } | |
232 | }, | |
233 | itemkeyup: function(view, record, item, index, e) { | |
234 | if (e.getKey() === e.ENTER && index == this.pressedIndex) { | |
9307eda4 DC |
235 | this.run_editor(); |
236 | } | |
ce9a0f27 DC |
237 | |
238 | this.pressedIndex = undefined; | |
9307eda4 DC |
239 | } |
240 | }, | |
241 | ||
06694509 DM |
242 | initComponent : function() { |
243 | var me = this; | |
244 | ||
245 | var rows = me.rows; | |
246 | ||
247 | if (!me.rstore) { | |
248 | if (!me.url) { | |
249 | throw "no url specified"; | |
250 | } | |
251 | ||
252 | me.rstore = Ext.create('Proxmox.data.ObjectStore', { | |
253 | url: me.url, | |
254 | interval: me.interval, | |
255 | extraParams: me.extraParams, | |
256 | rows: me.rows | |
257 | }); | |
258 | } | |
259 | ||
260 | var rstore = me.rstore; | |
261 | ||
262 | var store = Ext.create('Proxmox.data.DiffStore', { rstore: rstore, | |
263 | sorters: [], | |
264 | filters: [] | |
265 | }); | |
266 | ||
267 | if (rows) { | |
268 | Ext.Object.each(rows, function(key, rowdef) { | |
269 | if (Ext.isDefined(rowdef.defaultValue)) { | |
270 | store.add({ key: key, value: rowdef.defaultValue }); | |
271 | } else if (rowdef.required) { | |
272 | store.add({ key: key, value: undefined }); | |
273 | } | |
274 | }); | |
275 | } | |
276 | ||
277 | if (me.sorterFn) { | |
278 | store.sorters.add(Ext.create('Ext.util.Sorter', { | |
279 | sorterFn: me.sorterFn | |
280 | })); | |
281 | } | |
282 | ||
283 | store.filters.add(Ext.create('Ext.util.Filter', { | |
284 | filterFn: function(item) { | |
285 | if (rows) { | |
286 | var rowdef = rows[item.data.key]; | |
287 | if (!rowdef || (rowdef.visible === false)) { | |
288 | return false; | |
289 | } | |
290 | } | |
291 | return true; | |
292 | } | |
293 | })); | |
294 | ||
295 | Proxmox.Utils.monStoreErrors(me, rstore); | |
296 | ||
297 | Ext.applyIf(me, { | |
298 | store: store, | |
299 | stateful: false, | |
300 | columns: [ | |
301 | { | |
302 | header: gettext('Name'), | |
303 | width: me.cwidth1 || 200, | |
304 | dataIndex: 'key', | |
305 | renderer: me.renderKey | |
306 | }, | |
307 | { | |
308 | flex: 1, | |
309 | header: gettext('Value'), | |
310 | dataIndex: 'value', | |
311 | renderer: me.renderValue | |
312 | } | |
313 | ] | |
314 | }); | |
315 | ||
316 | me.callParent(); | |
4297e795 DM |
317 | |
318 | if (me.monStoreErrors) { | |
319 | Proxmox.Utils.monStoreErrors(me, me.store); | |
320 | } | |
06694509 DM |
321 | } |
322 | }); |