]>
git.proxmox.com Git - proxmox-widget-toolkit.git/blob - src/window/Edit.js
1 Ext
.define('Proxmox.window.Edit', {
2 extend
: 'Ext.window.Window',
3 alias
: 'widget.proxmoxWindowEdit',
5 // autoLoad trigger a load() after component creation
7 // set extra options like params for the load request
8 autoLoadOptions
: undefined,
10 // to submit extra params on load and submit, useful, e.g., if not all ID
11 // parameters are included in the URL
12 extraRequestParams
: {},
16 // use this to atimatically generate a title like `Create: <subject>`
19 // set isCreate to true if you want a Create button (instead OK and RESET)
22 // set to true if you want an Add button (instead of Create)
25 // set to true if you want an Remove button (instead of Create)
29 submitText
: undefined,
33 // string or function, called as (url, values) - useful if the ID of the
34 // new object is part of the URL, or that URL differs from GET/PUT URL
35 submitUrl
: Ext
.identityFn
,
37 // needed for finding the reference to submitbutton
38 // because we do not have a controller
39 referenceHolder
: true,
40 defaultButton
: 'submitbutton',
42 // finds the first form field
43 defaultFocus
: 'field:focusable[disabled=false][hidden=false]',
47 showTaskViewer
: false,
49 // gets called if we have a progress bar or taskview and it detected that
50 // the task finished. function(success)
51 taskDone
: Ext
.emptyFn
,
53 // gets called when the api call is finished, right at the beginning
54 // function(success, response, options)
55 apiCallDone
: Ext
.emptyFn
,
57 // assign a reference from docs, to add a help button docked to the
58 // bottom of the window. If undefined we magically fall back to the
59 // onlineHelp of our first item, if set.
60 onlineHelp
: undefined,
65 let form
= me
.formPanel
.getForm();
66 return form
.isValid();
69 getValues: function(dirtyOnly
) {
73 Ext
.apply(values
, me
.extraRequestParams
);
75 let form
= me
.formPanel
.getForm();
77 form
.getFields().each(function(field
) {
78 if (!field
.up('inputpanel') && (!dirtyOnly
|| field
.isDirty())) {
79 Proxmox
.Utils
.assemble_field_data(values
, field
.getSubmitData());
83 Ext
.Array
.each(me
.query('inputpanel'), function(panel
) {
84 Proxmox
.Utils
.assemble_field_data(values
, panel
.getValues(dirtyOnly
));
90 setValues: function(values
) {
93 let form
= me
.formPanel
.getForm();
94 let formfields
= form
.getFields();
96 Ext
.iterate(values
, function(id
, val
) {
97 let fields
= formfields
.filterBy((f
) =>
98 (f
.id
=== id
|| f
.name
=== id
|| f
.dataIndex
=== id
) && !f
.up('inputpanel'),
100 fields
.each((field
) => {
102 if (form
.trackResetOnLoad
) {
103 field
.resetOriginalValue();
108 Ext
.Array
.each(me
.query('inputpanel'), function(panel
) {
109 panel
.setValues(values
);
113 setSubmitText: function(text
) {
114 this.lookup('submitbutton').setText(text
);
120 let form
= me
.formPanel
.getForm();
122 let values
= me
.getValues();
123 Ext
.Object
.each(values
, function(name
, val
) {
124 if (Object
.prototype.hasOwnProperty
.call(values
, name
)) {
125 if (Ext
.isArray(val
) && !val
.length
) {
132 values
.digest
= me
.digest
;
135 if (me
.backgroundDelay
) {
136 values
.background_delay
= me
.backgroundDelay
;
139 let url
= Ext
.isFunction(me
.submitUrl
)
140 ? me
.submitUrl(me
.url
, values
)
141 : me
.submitUrl
|| me
.url
;
142 if (me
.method
=== 'DELETE') {
143 url
= url
+ "?" + Ext
.Object
.toQueryString(values
);
147 Proxmox
.Utils
.API2Request({
150 method
: me
.method
|| (me
.backgroundDelay
? 'POST' : 'PUT'),
152 failure: function(response
, options
) {
153 me
.apiCallDone(false, response
, options
);
155 if (response
.result
&& response
.result
.errors
) {
156 form
.markInvalid(response
.result
.errors
);
158 Ext
.Msg
.alert(gettext('Error'), response
.htmlStatus
);
160 success: function(response
, options
) {
162 (me
.backgroundDelay
|| me
.showProgress
|| me
.showTaskViewer
) &&
163 response
.result
.data
;
165 me
.apiCallDone(true, response
, options
);
167 if (hasProgressBar
) {
168 // stay around so we can trigger our close events
169 // when background action is completed
172 let upid
= response
.result
.data
;
173 let viewerClass
= me
.showTaskViewer
? 'Viewer' : 'Progress';
174 Ext
.create('Proxmox.window.Task' + viewerClass
, {
177 taskDone
: me
.taskDone
,
179 destroy: function() {
191 load: function(options
) {
194 let form
= me
.formPanel
.getForm();
196 options
= options
|| {};
198 let newopts
= Ext
.apply({
202 if (Object
.keys(me
.extraRequestParams
).length
> 0) {
203 let params
= newopts
.params
|| {};
204 Ext
.applyIf(params
, me
.extraRequestParams
);
205 newopts
.params
= params
;
208 let createWrapper = function(successFn
) {
212 success: function(response
, opts
) {
214 me
.digest
= response
.result
.digest
|| response
.result
.data
.digest
;
216 successFn(response
, opts
);
218 me
.setValues(response
.result
.data
);
220 // hack: fix ExtJS bug
221 Ext
.Array
.each(me
.query('radiofield'), function(f
) {
222 f
.resetOriginalValue();
225 failure: function(response
, opts
) {
226 Ext
.Msg
.alert(gettext('Error'), response
.htmlStatus
, function() {
233 createWrapper(options
.success
);
235 Proxmox
.Utils
.API2Request(newopts
);
238 initComponent: function() {
242 throw "no url specified";
245 if (me
.create
) {throw "deprecated parameter, use isCreate";}
247 let items
= Ext
.isArray(me
.items
) ? me
.items
: [me
.items
];
249 me
.items
= undefined;
251 me
.formPanel
= Ext
.create('Ext.form.Panel', {
253 method
: me
.method
|| 'PUT',
254 trackResetOnLoad
: true,
255 bodyPadding
: me
.bodyPadding
!== undefined ? me
.bodyPadding
: 10,
257 defaults
: Ext
.apply({}, me
.defaults
, {
260 fieldDefaults
: Ext
.apply({}, me
.fieldDefaults
, {
267 let inputPanel
= me
.formPanel
.down('inputpanel');
269 let form
= me
.formPanel
.getForm();
274 submitText
= me
.submitText
;
275 } else if (me
.isAdd
) {
276 submitText
= gettext('Add');
277 } else if (me
.isRemove
) {
278 submitText
= gettext('Remove');
280 submitText
= gettext('Create');
283 submitText
= me
.submitText
|| gettext('OK');
286 let submitBtn
= Ext
.create('Ext.Button', {
287 reference
: 'submitbutton',
289 disabled
: !me
.isCreate
,
290 handler: function() {
295 let resetBtn
= Ext
.create('Ext.Button', {
298 handler: function() {
303 let set_button_status = function() {
304 let valid
= form
.isValid();
305 let dirty
= form
.isDirty();
306 submitBtn
.setDisabled(!valid
|| !(dirty
|| me
.isCreate
));
307 resetBtn
.setDisabled(!dirty
);
309 if (inputPanel
&& inputPanel
.hasAdvanced
) {
310 // we want to show the advanced options
311 // as soon as some of it is not valid
312 let advancedItems
= me
.down('#advancedContainer').query('field');
313 let allAdvancedValid
= true;
314 advancedItems
.forEach(function(field
) {
315 if (!field
.isValid()) {
316 allAdvancedValid
= false;
320 if (!allAdvancedValid
) {
321 inputPanel
.setAdvancedVisible(true);
322 me
.down('#advancedcb').setValue(true);
327 form
.on('dirtychange', set_button_status
);
328 form
.on('validitychange', set_button_status
);
331 if (me
.fieldDefaults
&& me
.fieldDefaults
.labelWidth
) {
332 colwidth
+= me
.fieldDefaults
.labelWidth
- 100;
335 let twoColumn
= inputPanel
&& (inputPanel
.column1
|| inputPanel
.column2
);
337 if (me
.subject
&& !me
.title
) {
338 me
.title
= Proxmox
.Utils
.dialog_title(me
.subject
, me
.isCreate
, me
.isAdd
);
342 me
.buttons
= [submitBtn
];
344 me
.buttons
= [submitBtn
, resetBtn
];
347 if (inputPanel
&& inputPanel
.hasAdvanced
) {
348 let sp
= Ext
.state
.Manager
.getProvider();
349 let advchecked
= sp
.get('proxmox-advanced-cb');
350 inputPanel
.setAdvancedVisible(advchecked
);
353 xtype
: 'proxmoxcheckbox',
354 itemId
: 'advancedcb',
355 boxLabelAlign
: 'before',
356 boxLabel
: gettext('Advanced'),
357 stateId
: 'proxmox-advanced-cb',
360 change: function(cb
, val
) {
361 inputPanel
.setAdvancedVisible(val
);
362 sp
.set('proxmox-advanced-cb', val
);
369 let onlineHelp
= me
.onlineHelp
;
370 if (!onlineHelp
&& inputPanel
&& inputPanel
.onlineHelp
) {
371 onlineHelp
= inputPanel
.onlineHelp
;
375 let helpButton
= Ext
.create('Proxmox.button.Help');
376 me
.buttons
.unshift(helpButton
, '->');
377 Ext
.GlobalEvents
.fireEvent('proxmoxShowHelp', onlineHelp
);
382 width
: twoColumn
? colwidth
*2 : colwidth
,
384 items
: [me
.formPanel
],
389 // always mark invalid fields
390 me
.on('afterlayout', function() {
391 // on touch devices, the isValid function
392 // triggers a layout, which triggers an isValid
394 // to prevent this we disable the layouting here
395 // and enable it afterwards
396 me
.suspendLayout
= true;
398 me
.suspendLayout
= false;
402 me
.load(me
.autoLoadOptions
);