[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