copy window/Wizard.js from manager to manager5

www/manager5/window/Wizard.js

+Ext.define('PVE.window.Wizard', {
+    extend: 'Ext.window.Window',
+    
+    getValues: function(dirtyOnly) {
+	var me = this;
+
+        var values = {};
+
+	var form = me.down('form').getForm();
+
+        form.getFields().each(function(field) {
+            if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
+                PVE.Utils.assemble_field_data(values, field.getSubmitData());
+            }
+        });
+
+	Ext.Array.each(me.query('inputpanel'), function(panel) {
+	    PVE.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
+	});
+
+        return values;
+    },
+
+    initComponent: function() {
+	var me = this;
+
+	var tabs = me.items || [];
+	delete me.items;
+	
+	/* 
+	 * Items may have the following functions:
+	 * validator(): per tab custom validation
+	 * onSubmit(): submit handler
+	 * onGetValues(): overwrite getValues results
+	 */
+
+	Ext.Array.each(tabs, function(tab) {
+	    tab.disabled = true;
+	});
+	tabs[0].disabled = false;
+
+	var check_card = function(card) {
+	    var valid = true;
+	    var fields = card.query('field, fieldcontainer');
+	    if (card.isXType('fieldcontainer')) {
+		fields.unshift(card);
+	    }
+	    Ext.Array.each(fields, function(field) {
+		// Note: not all fielcontainer have isValid()
+		if (Ext.isFunction(field.isValid) && !field.isValid()) {
+		    valid = false;
+		}
+	    });
+
+	    if (Ext.isFunction(card.validator)) {
+		return card.validator();
+	    }
+
+	    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++) {
+		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); 
+	    } else {
+		me.down('#next').setVisible(true);
+		me.down('#submit').setVisible(false); 
+	    }
+	    var valid = check_card(newcard);
+	    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 next = tp.items.indexOf(newcard) + 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);
+	}
+
+	Ext.applyIf(me, {
+	    width: 620,
+	    height: 400,
+	    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',
+		    layout: 'fit',
+		    border: false,
+		    margins: '5 5 0 5',
+		    fieldDefaults: {
+			labelWidth: 100,
+			anchor: '100%'
+		    },
+		    items: [{
+			itemId: 'wizcontent',
+			xtype: 'tabpanel',
+			activeItem: 0,
+			bodyPadding: 10,
+			listeners: {
+			    afterrender: function(tp) {
+				var atab = this.getActiveTab();
+				tabchange(tp, atab);
+			    },
+			    tabchange: function(tp, newcard, oldcard) {
+				display_header(newcard);
+				tabchange(tp, newcard, oldcard);
+			    }
+			},
+			items: tabs
+		    }]
+		},
+		tbar
+	    ]
+	});
+	me.callParent();
+	display_header(tabs[0]);
+
+	Ext.Array.each(me.query('field'), function(field) {
+	    field.on('validitychange', function(f) {
+		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();
+		}
+	    });
+	});
+    }
+});