]>
Commit | Line | Data |
---|---|---|
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 | xtype: 'pveHelpButton', | |
70 | itemId: 'help' | |
71 | }, | |
72 | '->', | |
73 | { | |
74 | text: gettext('Back'), | |
75 | disabled: true, | |
76 | itemId: 'back', | |
77 | minWidth: 60, | |
78 | handler: function() { | |
79 | var tp = me.down('#wizcontent'); | |
80 | var atab = tp.getActiveTab(); | |
81 | var prev = tp.items.indexOf(atab) - 1; | |
82 | if (prev < 0) { | |
83 | return; | |
84 | } | |
85 | var ntab = tp.items.getAt(prev); | |
86 | if (ntab) { | |
87 | tp.setActiveTab(ntab); | |
88 | } | |
89 | ||
90 | ||
91 | } | |
92 | }, | |
93 | { | |
94 | text: gettext('Next'), | |
95 | disabled: true, | |
96 | itemId: 'next', | |
97 | minWidth: 60, | |
98 | handler: function() { | |
99 | ||
100 | var form = me.down('form').getForm(); | |
101 | ||
102 | var tp = me.down('#wizcontent'); | |
103 | var atab = tp.getActiveTab(); | |
104 | if (!check_card(atab)) { | |
105 | return; | |
106 | } | |
107 | ||
108 | var next = tp.items.indexOf(atab) + 1; | |
109 | var ntab = tp.items.getAt(next); | |
110 | if (ntab) { | |
111 | ntab.enable(); | |
112 | tp.setActiveTab(ntab); | |
113 | } | |
114 | ||
115 | } | |
116 | }, | |
117 | { | |
118 | text: gettext('Finish'), | |
119 | minWidth: 60, | |
120 | hidden: true, | |
121 | itemId: 'submit', | |
122 | handler: function() { | |
123 | var tp = me.down('#wizcontent'); | |
124 | var atab = tp.getActiveTab(); | |
125 | atab.onSubmit(); | |
126 | } | |
127 | } | |
128 | ] | |
129 | }); | |
130 | ||
131 | var display_header = function(newcard) { | |
132 | var html = '<h1>' + newcard.title + '</h1>'; | |
133 | if (newcard.descr) { | |
134 | html += newcard.descr; | |
135 | } | |
136 | me.down('#header').update(html); | |
137 | }; | |
138 | ||
139 | var disable_at = function(card) { | |
140 | var tp = me.down('#wizcontent'); | |
141 | var idx = tp.items.indexOf(card); | |
142 | for(;idx < tp.items.getCount();idx++) { | |
143 | var nc = tp.items.getAt(idx); | |
144 | if (nc) { | |
145 | nc.disable(); | |
146 | } | |
147 | } | |
148 | }; | |
149 | ||
150 | var tabchange = function(tp, newcard, oldcard) { | |
151 | if (newcard.onSubmit) { | |
152 | me.down('#next').setVisible(false); | |
153 | me.down('#submit').setVisible(true); | |
154 | } else { | |
155 | me.down('#next').setVisible(true); | |
156 | me.down('#submit').setVisible(false); | |
157 | } | |
158 | var valid = check_card(newcard); | |
159 | me.down('#next').setDisabled(!valid); | |
160 | me.down('#submit').setDisabled(!valid); | |
161 | me.down('#back').setDisabled(tp.items.indexOf(newcard) == 0); | |
162 | ||
163 | var next = tp.items.indexOf(newcard) + 1; | |
164 | var ntab = tp.items.getAt(next); | |
165 | if (valid && ntab && !newcard.onSubmit) { | |
166 | ntab.enable(); | |
167 | } | |
168 | }; | |
169 | ||
170 | if (me.subject && !me.title) { | |
171 | me.title = PVE.Utils.dialog_title(me.subject, true, false); | |
172 | } | |
173 | ||
174 | Ext.apply(me, { | |
175 | width: 620, | |
176 | height: 450, | |
177 | modal: true, | |
178 | border: false, | |
179 | draggable: true, | |
180 | closable: true, | |
181 | resizable: false, | |
182 | layout: 'border', | |
183 | items: [ | |
184 | { | |
185 | // disabled for now - not really needed | |
186 | hidden: true, | |
187 | region: 'north', | |
188 | itemId: 'header', | |
189 | layout: 'fit', | |
190 | margins: '5 5 0 5', | |
191 | bodyPadding: 10, | |
192 | html: '' | |
193 | }, | |
194 | { | |
195 | xtype: 'form', | |
196 | region: 'center', | |
197 | layout: 'fit', | |
198 | border: false, | |
199 | margins: '5 5 0 5', | |
200 | fieldDefaults: { | |
201 | labelWidth: 100, | |
202 | anchor: '100%' | |
203 | }, | |
204 | items: [{ | |
205 | itemId: 'wizcontent', | |
206 | xtype: 'tabpanel', | |
207 | activeItem: 0, | |
208 | bodyPadding: 10, | |
209 | listeners: { | |
210 | afterrender: function(tp) { | |
211 | var atab = this.getActiveTab(); | |
212 | tabchange(tp, atab); | |
213 | }, | |
214 | tabchange: function(tp, newcard, oldcard) { | |
215 | display_header(newcard); | |
216 | tabchange(tp, newcard, oldcard); | |
217 | } | |
218 | }, | |
219 | items: tabs | |
220 | }] | |
221 | }, | |
222 | tbar | |
223 | ] | |
224 | }); | |
225 | me.callParent(); | |
226 | display_header(tabs[0]); | |
227 | ||
228 | Ext.Array.each(me.query('field'), function(field) { | |
229 | field.on('change', function(f) { | |
230 | var tp = me.down('#wizcontent'); | |
231 | var atab = tp.getActiveTab(); | |
232 | var valid = check_card(atab); | |
233 | me.down('#next').setDisabled(!valid); | |
234 | me.down('#submit').setDisabled(!valid); | |
235 | var next = tp.items.indexOf(atab) + 1; | |
236 | var ntab = tp.items.getAt(next); | |
237 | if (!valid) { | |
238 | disable_at(ntab); | |
239 | } else if (ntab && !atab.onSubmit) { | |
240 | ntab.enable(); | |
241 | } | |
242 | }); | |
243 | }); | |
244 | } | |
245 | }); |