pve-manager/www/manager/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();
		}
	    });
	});
    }
});