www/manager6/window/Wizard.js

   1 Ext.define('PVE.window.Wizard', {
   2     extend: 'Ext.window.Window',
   3
   4     getValues: function(dirtyOnly) {
   5         var me = this;
   6
   7         var values = {};
   8
   9         var form = me.down('form').getForm();
  10
  11         form.getFields().each(function(field) {
  12             if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
  13                 PVE.Utils.assemble_field_data(values, field.getSubmitData());
  14             }
  15         });
  16
  17         Ext.Array.each(me.query('inputpanel'), function(panel) {
  18             PVE.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
  19         });
  20
  21         return values;
  22     },
  23
  24     initComponent: function() {
  25         var me = this;
  26
  27         var tabs = me.items || [];
  28         delete me.items;
  29
  30         /*
  31          * Items may have the following functions:
  32          * validator(): per tab custom validation
  33          * onSubmit(): submit handler
  34          * onGetValues(): overwrite getValues results
  35          */
  36
  37         Ext.Array.each(tabs, function(tab) {
  38             tab.disabled = true;
  39         });
  40         tabs[0].disabled = false;
  41
  42         var check_card = function(card) {
  43             var valid = true;
  44             var fields = card.query('field, fieldcontainer');
  45             if (card.isXType('fieldcontainer')) {
  46                 fields.unshift(card);
  47             }
  48             Ext.Array.each(fields, function(field) {
  49                 // Note: not all fielcontainer have isValid()
  50                 if (Ext.isFunction(field.isValid) && !field.isValid()) {
  51                     valid = false;
  52                 }
  53             });
  54
  55             if (Ext.isFunction(card.validator)) {
  56                 return card.validator();
  57             }
  58
  59             return valid;
  60         };
  61
  62
  63         var tbar = Ext.create('Ext.toolbar.Toolbar', {
  64             ui: 'footer',
  65             region: 'south',
  66             margins: '0 5 5 5',
  67             items: [
  68                 '->',
  69                 {
  70                     text: gettext('Back'),
  71                     disabled: true,
  72                     itemId: 'back',
  73                     minWidth: 60,
  74                     handler: function() {
  75                         var tp = me.down('#wizcontent');
  76                         var atab = tp.getActiveTab();
  77                         var prev = tp.items.indexOf(atab) - 1;
  78                         if (prev < 0) {
  79                             return;
  80                         }
  81                         var ntab = tp.items.getAt(prev);
  82                         if (ntab) {
  83                             tp.setActiveTab(ntab);
  84                         }
  85
  86
  87                     }
  88                 },
  89                 {
  90                     text: gettext('Next'),
  91                     disabled: true,
  92                     itemId: 'next',
  93                     minWidth: 60,
  94                     handler: function() {
  95
  96                         var form = me.down('form').getForm();
  97
  98                         var tp = me.down('#wizcontent');
  99                         var atab = tp.getActiveTab();
 100                         if (!check_card(atab)) {
 101                             return;
 102                         }
 103
 104                         var next = tp.items.indexOf(atab) + 1;
 105                         var ntab = tp.items.getAt(next);
 106                         if (ntab) {
 107                             ntab.enable();
 108                             tp.setActiveTab(ntab);
 109                         }
 110
 111                     }
 112                 },
 113                 {
 114                     text: gettext('Finish'),
 115                     minWidth: 60,
 116                     hidden: true,
 117                     itemId: 'submit',
 118                     handler: function() {
 119                         var tp = me.down('#wizcontent');
 120                         var atab = tp.getActiveTab();
 121                         atab.onSubmit();
 122                     }
 123                 }
 124             ]
 125         });
 126
 127         var display_header = function(newcard) {
 128             var html = '<h1>' + newcard.title + '</h1>';
 129             if (newcard.descr) {
 130                 html += newcard.descr;
 131             }
 132             me.down('#header').update(html);
 133         };
 134
 135         var disable_at = function(card) {
 136             var tp = me.down('#wizcontent');
 137             var idx = tp.items.indexOf(card);
 138             for(;idx < tp.items.getCount();idx++) {
 139                 var nc = tp.items.getAt(idx);
 140                 if (nc) {
 141                     nc.disable();
 142                 }
 143             }
 144         };
 145
 146         var tabchange = function(tp, newcard, oldcard) {
 147             if (newcard.onSubmit) {
 148                 me.down('#next').setVisible(false);
 149                 me.down('#submit').setVisible(true);
 150             } else {
 151                 me.down('#next').setVisible(true);
 152                 me.down('#submit').setVisible(false);
 153             }
 154             var valid = check_card(newcard);
 155             me.down('#next').setDisabled(!valid);
 156             me.down('#submit').setDisabled(!valid);
 157             me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0);
 158
 159             var next = tp.items.indexOf(newcard) + 1;
 160             var ntab = tp.items.getAt(next);
 161             if (valid && ntab && !newcard.onSubmit) {
 162                 ntab.enable();
 163             }
 164         };
 165
 166         if (me.subject && !me.title) {
 167             me.title = PVE.Utils.dialog_title(me.subject, true, false);
 168         }
 169
 170         Ext.apply(me, {
 171             width: 620,
 172             height: 450,
 173             modal: true,
 174             border: false,
 175             draggable: true,
 176             closable: true,
 177             resizable: false,
 178             layout: 'border',
 179             items: [
 180                 {
 181                     // disabled for now - not really needed
 182                     hidden: true,
 183                     region: 'north',
 184                     itemId: 'header',
 185                     layout: 'fit',
 186                     margins: '5 5 0 5',
 187                     bodyPadding: 10,
 188                     html: ''
 189                 },
 190                 {
 191                     xtype: 'form',
 192                     region: 'center',
 193                     layout: 'fit',
 194                     border: false,
 195                     margins: '5 5 0 5',
 196                     fieldDefaults: {
 197                         labelWidth: 100,
 198                         anchor: '100%'
 199                     },
 200                     items: [{
 201                         itemId: 'wizcontent',
 202                         xtype: 'tabpanel',
 203                         activeItem: 0,
 204                         bodyPadding: 10,
 205                         listeners: {
 206                             afterrender: function(tp) {
 207                                 var atab = this.getActiveTab();
 208                                 tabchange(tp, atab);
 209                             },
 210                             tabchange: function(tp, newcard, oldcard) {
 211                                 display_header(newcard);
 212                                 tabchange(tp, newcard, oldcard);
 213                             }
 214                         },
 215                         items: tabs
 216                     }]
 217                 },
 218                 tbar
 219             ]
 220         });
 221         me.callParent();
 222         display_header(tabs[0]);
 223
 224         Ext.Array.each(me.query('field'), function(field) {
 225             field.on('validitychange', function(f) {
 226                 var tp = me.down('#wizcontent');
 227                 var atab = tp.getActiveTab();
 228                 var valid = check_card(atab);
 229                 me.down('#next').setDisabled(!valid);
 230                 me.down('#submit').setDisabled(!valid);
 231                 var next = tp.items.indexOf(atab) + 1;
 232                 var ntab = tp.items.getAt(next);
 233                 if (!valid) {
 234                     disable_at(ntab);
 235                 } else if (ntab && !atab.onSubmit) {
 236                     ntab.enable();
 237                 }
 238             });
 239         });
 240     }
 241 });