Ext.define('PVE.window.Wizard', {
extend: 'Ext.window.Window',
-
+
+ activeTitle: '', // used for automated testing
+
+ width: 700,
+ height: 510,
+
+ modal: true,
+ border: false,
+
+ draggable: true,
+ closable: true,
+ resizable: false,
+
+ layout: 'border',
+
getValues: function(dirtyOnly) {
var me = this;
form.getFields().each(function(field) {
if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
- PVE.Utils.assemble_field_data(values, field.getSubmitData());
+ Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
}
});
Ext.Array.each(me.query('inputpanel'), function(panel) {
- PVE.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
+ Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
});
return values;
var tabs = me.items || [];
delete me.items;
-
- /*
+
+ /*
* Items may have the following functions:
* validator(): per tab custom validation
* onSubmit(): submit handler
});
tabs[0].disabled = false;
+ var maxidx = 0;
+ var curidx = 0;
+
var check_card = function(card) {
var valid = true;
var fields = card.query('field, fieldcontainer');
return valid;
};
-
- var tbar = Ext.create('Ext.toolbar.Toolbar', {
- ui: 'footer',
- region: 'south',
- margins: '0 5 5 5',
- items: [
- '->',
- {
- text: gettext('Back'),
- disabled: true,
- itemId: 'back',
- minWidth: 60,
- handler: function() {
- var tp = me.down('#wizcontent');
- var atab = tp.getActiveTab();
- var prev = tp.items.indexOf(atab) - 1;
- if (prev < 0) {
- return;
- }
- var ntab = tp.items.getAt(prev);
- if (ntab) {
- tp.setActiveTab(ntab);
- }
-
-
- }
- },
- {
- text: gettext('Next'),
- disabled: true,
- itemId: 'next',
- minWidth: 60,
- handler: function() {
-
- var form = me.down('form').getForm();
-
- var tp = me.down('#wizcontent');
- var atab = tp.getActiveTab();
- if (!check_card(atab)) {
- return;
- }
-
- var next = tp.items.indexOf(atab) + 1;
- var ntab = tp.items.getAt(next);
- if (ntab) {
- ntab.enable();
- tp.setActiveTab(ntab);
- }
-
- }
- },
- {
- text: gettext('Finish'),
- minWidth: 60,
- hidden: true,
- itemId: 'submit',
- handler: function() {
- var tp = me.down('#wizcontent');
- var atab = tp.getActiveTab();
- atab.onSubmit();
- }
- }
- ]
- });
-
- var display_header = function(newcard) {
- var html = '<h1>' + newcard.title + '</h1>';
- if (newcard.descr) {
- html += newcard.descr;
- }
- me.down('#header').update(html);
- };
-
var disable_at = function(card) {
var tp = me.down('#wizcontent');
var idx = tp.items.indexOf(card);
- for(;idx < tp.items.getCount();idx++) {
+ for (;idx < tp.items.getCount(); idx++) {
var nc = tp.items.getAt(idx);
if (nc) {
nc.disable();
var tabchange = function(tp, newcard, oldcard) {
if (newcard.onSubmit) {
me.down('#next').setVisible(false);
- me.down('#submit').setVisible(true);
+ me.down('#submit').setVisible(true);
} else {
me.down('#next').setVisible(true);
- me.down('#submit').setVisible(false);
+ me.down('#submit').setVisible(false);
}
var valid = check_card(newcard);
- me.down('#next').setDisabled(!valid);
- me.down('#submit').setDisabled(!valid);
+ me.down('#next').setDisabled(!valid);
+ me.down('#submit').setDisabled(!valid);
me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0);
- if (oldcard && !check_card(oldcard)) {
- disable_at(oldcard);
+ var idx = tp.items.indexOf(newcard);
+ if (idx > maxidx) {
+ maxidx = idx;
}
+ curidx = idx;
- var next = tp.items.indexOf(newcard) + 1;
+ var next = idx + 1;
var ntab = tp.items.getAt(next);
if (valid && ntab && !newcard.onSubmit) {
ntab.enable();
};
if (me.subject && !me.title) {
- me.title = PVE.Utils.dialog_title(me.subject, true, false);
+ me.title = Proxmox.Utils.dialog_title(me.subject, true, false);
}
+ var sp = Ext.state.Manager.getProvider();
+ var advchecked = sp.get('proxmox-advanced-cb');
+
Ext.apply(me, {
- width: 620,
- height: 450,
- modal: true,
- border: false,
- draggable: true,
- closable: true,
- resizable: false,
- layout: 'border',
items: [
- {
- // disabled for now - not really needed
- hidden: true,
- region: 'north',
- itemId: 'header',
- layout: 'fit',
- margins: '5 5 0 5',
- bodyPadding: 10,
- html: ''
- },
{
xtype: 'form',
region: 'center',
margins: '5 5 0 5',
fieldDefaults: {
labelWidth: 100,
- anchor: '100%'
+ anchor: '100%',
},
items: [{
itemId: 'wizcontent',
tabchange(tp, atab);
},
tabchange: function(tp, newcard, oldcard) {
- display_header(newcard);
tabchange(tp, newcard, oldcard);
- }
+ },
},
- items: tabs
- }]
+ items: tabs,
+ }],
+ },
+ ],
+ fbar: [
+ {
+ xtype: 'proxmoxHelpButton',
+ itemId: 'help',
+ },
+ '->',
+ {
+ xtype: 'proxmoxcheckbox',
+ boxLabelAlign: 'before',
+ boxLabel: gettext('Advanced'),
+ value: advchecked,
+ listeners: {
+ change: function(cb, val) {
+ var tp = me.down('#wizcontent');
+ tp.query('inputpanel').forEach(function(ip) {
+ ip.setAdvancedVisible(val);
+ });
+
+ sp.set('proxmox-advanced-cb', val);
+ },
+ },
+ },
+ {
+ text: gettext('Back'),
+ disabled: true,
+ itemId: 'back',
+ minWidth: 60,
+ handler: function() {
+ var tp = me.down('#wizcontent');
+ var atab = tp.getActiveTab();
+ var prev = tp.items.indexOf(atab) - 1;
+ if (prev < 0) {
+ return;
+ }
+ var ntab = tp.items.getAt(prev);
+ if (ntab) {
+ tp.setActiveTab(ntab);
+ }
+ },
+ },
+ {
+ text: gettext('Next'),
+ disabled: true,
+ itemId: 'next',
+ minWidth: 60,
+ handler: function() {
+ var form = me.down('form').getForm();
+
+ var tp = me.down('#wizcontent');
+ var atab = tp.getActiveTab();
+ if (!check_card(atab)) {
+ return;
+ }
+
+ var next = tp.items.indexOf(atab) + 1;
+ var ntab = tp.items.getAt(next);
+ if (ntab) {
+ ntab.enable();
+ tp.setActiveTab(ntab);
+ }
+ },
},
- tbar
- ]
+ {
+ text: gettext('Finish'),
+ minWidth: 60,
+ hidden: true,
+ itemId: 'submit',
+ handler: function() {
+ var tp = me.down('#wizcontent');
+ var atab = tp.getActiveTab();
+ atab.onSubmit();
+ },
+ },
+ ],
});
me.callParent();
- display_header(tabs[0]);
+
+ Ext.Array.each(me.query('inputpanel'), function(panel) {
+ panel.setAdvancedVisible(advchecked);
+ });
Ext.Array.each(me.query('field'), function(field) {
- field.on('validitychange', function(f) {
+ var validcheck = function() {
var tp = me.down('#wizcontent');
- var atab = tp.getActiveTab();
- var valid = check_card(atab);
- me.down('#next').setDisabled(!valid);
- me.down('#submit').setDisabled(!valid);
- var next = tp.items.indexOf(atab) + 1;
- var ntab = tp.items.getAt(next);
- if (!valid) {
- disable_at(ntab);
- } else if (ntab && !atab.onSubmit) {
- ntab.enable();
+
+ // check tabs from current to the last enabled for validity
+ // since we might have changed a validity on a later one
+ var i;
+ for (i = curidx; i <= maxidx && i < tp.items.getCount(); i++) {
+ var tab = tp.items.getAt(i);
+ var valid = check_card(tab);
+
+ // only set the buttons on the current panel
+ if (i === curidx) {
+ me.down('#next').setDisabled(!valid);
+ me.down('#submit').setDisabled(!valid);
+ }
+
+ // if a panel is invalid, then disable it and all following,
+ // else enable it and go to the next
+ var ntab = tp.items.getAt(i + 1);
+ if (!valid) {
+ disable_at(ntab);
+ return;
+ } else if (ntab && !tab.onSubmit) {
+ ntab.enable();
+ }
}
- });
+ };
+ field.on('change', validcheck);
+ field.on('validitychange', validcheck);
});
- }
+ },
});