[pve-devel] r5882 - pve-manager/pve2/www/new/window

svn-commits at proxmox.com svn-commits at proxmox.com
Thu Apr 28 17:35:28 CEST 2011


Author: dietmar
Date: 2011-04-28 17:35:27 +0200 (Thu, 28 Apr 2011)
New Revision: 5882

Modified:
   pve-manager/pve2/www/new/window/Wizard.js
Log:
improve wizard


Modified: pve-manager/pve2/www/new/window/Wizard.js
===================================================================
--- pve-manager/pve2/www/new/window/Wizard.js	2011-04-27 05:27:51 UTC (rev 5881)
+++ pve-manager/pve2/www/new/window/Wizard.js	2011-04-28 15:35:27 UTC (rev 5882)
@@ -8,6 +8,25 @@
     initComponent: function() {
 	var me = this;
 
+	var tabs = me.items || [];
+	delete me.items;
+
+	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');
+	    Ext.Array.each(fields, function(field) {
+		if (!field.isValid())
+		    valid = false;
+	    });
+	    return valid;
+	};
+
+
 	var tbar = Ext.create('Ext.toolbar.Toolbar', {
             ui: 'footer',
 	    region: 'south',
@@ -16,23 +35,62 @@
 		'->', 
 		{ 
 		    text: 'Back',
+		    disabled: true,
+		    itemId: 'back',
+		    minWidth: 60,
 		    handler: function() {
-			var card = me.down('#wizcontent');
-			console.log(card);
+			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: 'Next',
+		    disabled: true,
+		    itemId: 'next',
+		    minWidth: 60,
 		    handler: function() {
-			var card = me.down('#wizcontent');
-			console.log(card);
+
+			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: 'Submit',
+		    minWidth: 60,
+		    hidden: true,
+		    itemId: 'submit',
+		    handler: function() {
+			console.log("SUBMIT");
+			var tp = me.down('#wizcontent');
+			var atab = tp.getActiveTab();
+			atab.onSubmit();
+		    }
+		},
+		{
 		    text: 'Cancel',
+		    minWidth: 60,
 		    handler: function() {
 			me.close();
 		    }
@@ -40,6 +98,24 @@
 	    ]
 	});
 
+	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();
+	    }
+	};
+
 	Ext.applyIf(me, {
 	    width: 800,
 	    height: 600,
@@ -53,40 +129,75 @@
 	    items: [
 		{
 		    region: 'north',
+		    itemId: 'header',
 		    layout: 'fit',
 		    margins: '5 5 5 5',
 		    bodyPadding: 10,
-		    items: {
-			border: false,
-			html: '<h1>Hardware Type</h1>' +
-			    'What hardware type do you want to install?'
-		    }
+		    html: ''
 		},
 		{
+		    xtype: 'form',
 		    region: 'center',
-		    itemId: 'wizcontent',
-		    xtype: 'tabpanel',
-		    //tabPosition: 'bottom',
-		    activeItem: 0,
+		    layout: 'fit',
+		    border: false,
 		    margins: '0 5 0 5',
-		    bodyPadding: 5,
-		    items: [
-			{
-		            xtype: 'fieldset',
-			    title: 'Hardware type'
-	    
+		    items: {
+			itemId: 'wizcontent',
+			xtype: 'tabpanel',
+			activeItem: 0,
+			bodyPadding: 10,
+			listeners: {
+			    tabchange: function(tp, newcard, oldcard) {
+				display_header(newcard);
+				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();
+				}
+			    }
 			},
-			{
-		            xtype: 'fieldset',
-			    title: 'Another Information'
-	    
-			}
-		    ]
+			items: tabs
+		    }
 		},
 		tbar
 	    ]
 	});
 	me.callParent();
+	display_header(tabs[0]);
+
+	Ext.Array.each(me.query('field'), function(field) {
+	    field.on('validitychange', function(f) {
+		console.log("VCHANGEW " + f.name);
+		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();
+		}
+	    });
+	});
+
     }
 });
 
@@ -97,7 +208,63 @@
 	var me = this;
 
 	Ext.applyIf(me, {
-	    title: 'Create new VM'
+	    title: 'Create new VM',
+	    items: [
+		{
+		    title: 'Hardware type',
+		    descr: 'Just a test',
+		    layout: 'vbox',
+		    items: {
+			xtype: 'textfield',
+			name: 'name1',
+			fieldLabel: 'Name',
+			allowBlank: false
+		    }
+		    
+		},
+		{
+		    layout: 'vbox',
+		    title: 'Another Information',
+		    descr: 'Just a test 2',
+		    //onSubmit: function() {},
+		    items: {
+			xtype: 'textfield',
+			name: 'name2',
+			fieldLabel: 'Info2',
+			allowBlank: false
+		    }
+		},
+		{
+		    layout: 'vbox',
+		    title: 'Last tabg',
+		    descr: 'Just a test 3',
+		    items: {
+			xtype: 'textfield',
+			name: 'name3',
+			fieldLabel: 'Info3',
+			allowBlank: false
+		    }
+		},
+		{
+		    layout: 'fit',
+		    title: 'Summary',
+		    descr: 'Please verify',
+		    listeners: {
+			show: function() {
+			    var form = me.down('form').getForm();
+			    var kv = form.getFieldValues();
+			    this.update(Ext.JSON.encode(kv));
+
+			}
+		    },
+		    onSubmit: function() {
+			var form = me.down('form').getForm();
+			var kv = form.getFieldValues();
+			console.dir(kv);
+		    },
+		    html: 'no content'
+		}
+	    ]
 	});
 
 	me.callParent();



More information about the pve-devel mailing list