form2acc.js source code:
1 // vim: ts=4:sw=4:nu:fdc=4:nospell
2 /**
3 * Form to Accordions Transform Example Application
4 *
5 * @author Ing. Jozef Sakalos
6 *
7 */
8
9 // set blank image to local file
10 Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
11
12
13 Ext.onReady(function() {
14 // {{{
15 var form2accordion = function(form, configs) {
16 configs = 'object' === typeof configs && configs.length ? configs : [];
17 var formEl = 'string' === typeof form ? Ext.get(form) : form.el;
18 var accs = [];
19 var cols = formEl.select('div.x-form-column');
20 var i = 0;
21
22 cols.each(function(col) {
23 var config = configs[i] || {};
24 var accId = col.dom.id || Ext.id();
25 Ext.applyIf(config, {
26 id:accId
27 , independent:true
28 , draggable:false
29 , undockable:false
30 });
31 var acc = new Ext.ux.Accordion(col, config || {});
32 var fsets = col.select('fieldset');
33 var panelsCfg = config.panelsCfg || [];
34 try {delete config.panelsCfg;} catch(e) {};
35 var j = 0;
36 fsets.each(function(fset) {
37 var panelConfig = panelsCfg[j] || {};
38 var panelId = fset.dom.id || Ext.id();
39 fset.dom.id = '';
40 var legend = fset.select('legend').item(0);
41 var title = legend.dom.innerHTML;
42 legend.remove();
43 Ext.applyIf(panelConfig, {
44 title:title
45 , id:panelId
46 , useShadow:false
47 , autoCreate: {tag:'div', children:[{tag:'div', cls:'x-dock-panel-body-content'}]}
48 });
49 var panel = acc.add(new Ext.ux.InfoPanel(panelConfig));
50 var cont = panel.body.select('div.x-dock-panel-body-content').item(0);
51 fset.clean();
52 var el;
53 while(el = fset.down('*')) {
54 cont.appendChild(el);
55 }
56 fset.remove();
57 j++;
58 })
59 col.select('div.x-form-clear').remove();
60 accs.push(acc);
61 i++;
62 });
63 return accs;
64 };
65 // }}}
66
67 var dh = Ext.DomHelper;
68 var frm = new Ext.form.Form({
69 url:'form2acc.php'
70 , buttonAlign:'center'
71 });
72
73 Ext.QuickTips.init();
74
75 // first column
76 // {{{
77 frm.column({id:'acc1', width:240, labelWidth:75, labelAlign:'right', style:'margin-right:10px'});
78 // first fieldset
79 frm.fieldset(
80 {id:'panel1', hideLabels:true, legend:'Column 1 Legend 1 to Panel 1 Title'}
81 , new Ext.form.Checkbox({
82 id: 'cb1'
83 , boxLabel: 'Check to show Panel 2'
84 })
85 , new Ext.form.Checkbox({
86 id: 'cb2'
87 , boxLabel: 'Checkbox 2'
88 })
89 );
90 // second fieldset
91 frm.fieldset(
92 {id:'panel2', labelSeparator:'', legend:'Column 1 Legend 2 to Panel 2 Title'}
93 , new Ext.form.Checkbox({
94 id: 'cb3'
95 , boxLabel: 'Checkbox 3'
96 })
97 , new Ext.form.Checkbox({
98 id: 'cb4'
99 , boxLabel: 'Checkbox 4'
100 })
101 , new Ext.form.TextField({
102 fieldLabel: 'Describe'
103 , labelSeparator: ':'
104 , id: 'txt1'
105 })
106 );
107 // ends column
108 frm.end();
109 // }}}
110
111 // second column
112 // {{{
113 frm.column({id:'acc2', width:240, labelWidth:75, labelAlign:'right', style:'min-height:24px'});
114 // first fieldset
115 frm.fieldset(
116 {id:'panel3', hideLabels:true, legend:'Column 2 Legend 1 to Panel 1 Title'}
117 , new Ext.form.Checkbox({
118 id: 'cb5'
119 , boxLabel: 'Checkbox 5'
120 })
121 , new Ext.form.Checkbox({
122 id: 'cb6'
123 , boxLabel: 'Checkbox 6'
124 })
125 );
126 // second fieldset
127 frm.fieldset(
128 {id:'panel4', labelSeparator:'', legend:'Column 2 Legend 2 to Panel 2 Title'}
129 , new Ext.form.Checkbox({
130 id: 'cb7'
131 , boxLabel: 'Checkbox 7'
132 })
133 , new Ext.form.Checkbox({
134 id: 'cb8'
135 , boxLabel: 'Checkbox 8'
136 })
137 , new Ext.form.TextField({
138 fieldLabel: 'Describe'
139 , labelSeparator: ':'
140 , id: 'txt2'
141 })
142 );
143 // ends column
144 frm.end();
145 // }}}
146
147
148 frm.addButton('Save', function() {
149 frm.el.dom.submit();
150 });
151 frm.addButton('Reset');
152 frm.render('med-form-ct');
153
154 var accs;
155 var transBtn = new Ext.Button('transform-btn-ct', {
156 text: 'Transform this form to accordions'
157 , handler: function() {
158 accs = form2accordion(frm, [{
159 panelsCfg: [{
160 icon: '../img/silk/icons/lightbulb.png'
161 , collapsed: false
162 },{
163 icon: '../img/silk/icons/lightbulb_off.png'
164 }]
165 },{
166 independent: true
167 , undockable: false
168 , draggable: false
169 , panelsCfg: [{
170 icon: '../img/silk/icons/add.png'
171 , collapsed: false
172 },{
173 icon: '../img/silk/icons/delete.png'
174 }]
175 }
176 ]);
177 transBtn.destroy();
178 installShowHide();
179 }
180 });
181
182 // form from Ext Examples
183 // {{{
184 /*
185 * ================ Form 4 =======================
186 */
187 var form = new Ext.form.Form({
188 labelAlign: 'right',
189 labelWidth: 75,
190 url:'form2acc.php'
191 });
192
193 form.column({width:342, labelWidth:75}); // open column, without auto close
194 form.fieldset(
195 {legend:'Contact Information'},
196 new Ext.form.TextField({
197 fieldLabel: 'Full Name',
198 name: 'fullName',
199 allowBlank:false,
200 value: 'Jack Slocum'
201 }),
202
203 new Ext.form.TextField({
204 fieldLabel: 'Job Title',
205 name: 'title',
206 value: 'Jr. Developer'
207 }),
208
209 new Ext.form.TextField({
210 fieldLabel: 'Company',
211 name: 'company',
212 value: 'Ext JS'
213 }),
214
215 new Ext.form.TextArea({
216 fieldLabel: 'Address',
217 name: 'address',
218 grow: true,
219 preventScrollbars:true,
220 value: '4 Redbulls Drive'
221 })
222 );
223 form.fieldset(
224 {legend:'Phone Numbers'},
225 new Ext.form.TextField({
226 fieldLabel: 'Home',
227 name: 'home',
228 value: '(888) 555-1212'
229 }),
230
231 new Ext.form.TextField({
232 fieldLabel: 'Business',
233 name: 'business'
234 }),
235
236 new Ext.form.TextField({
237 fieldLabel: 'Mobile',
238 name: 'mobile'
239 }),
240
241 new Ext.form.TextField({
242 fieldLabel: 'Fax',
243 name: 'fax'
244 })
245 );
246 form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
247
248
249 form.column(
250 {width:202, style:'margin-left:10px', clear:true}
251 );
252
253 form.fieldset(
254 {id:'photo', legend:'Photo'}
255 );
256 form.end();
257
258 form.fieldset(
259 {legend:'Options', hideLabels:true},
260 new Ext.form.Checkbox({
261 boxLabel:'Ext 1.0 User',
262 name:'extuser',
263 width:'auto'
264 }),
265 new Ext.form.Checkbox({
266 boxLabel:'Ext Commercial User',
267 name:'extcomm',
268 width:'auto'
269 }),
270 new Ext.form.Checkbox({
271 boxLabel:'Ext Premium Member',
272 name:'extprem',
273 width:'auto'
274 }),
275 new Ext.form.Checkbox({
276 boxLabel:'Ext Team Member',
277 name:'extteam',
278 checked:true,
279 width:'auto'
280 })
281 );
282
283 form.end(); // close the column
284
285
286 form.applyIfToFields({
287 width:230
288 });
289
290 form.addButton('Save', function() {
291 form.el.dom.submit();
292 });
293 form.addButton('Cancel');
294
295 form.render('form-ct4');
296
297 // The form elements are standard HTML elements. By assigning an id (as we did above)
298 // we can manipulate them like any other element
299 var photo = Ext.get('photo');
300 var c = photo.createChild({
301 tag:'center',
302 cn: {
303 tag:'img',
304 src: 'http://extjs.com/forum/image.php?u=2&dateline=1175747336',
305 style:'margin-bottom:5px;'
306 }
307 });
308 new Ext.Button(c, {
309 text: 'Change Photo'
310 });
311 // }}}
312
313 var accs2;
314 var transBtn2 = new Ext.Button('transform2-btn-ct', {
315 text: 'Transform this form to accordions'
316 , handler: function() {
317 accs = form2accordion(form, [{
318 independent: true
319 , undockable: false
320 , draggable: false
321 , panelsCfg: [{
322 collapsed:false
323 },{
324 collapsed:true
325 }]
326 },{
327 independent: true
328 , undockable: false
329 , draggable: false
330 , panelsCfg: [{
331 collapsed:false
332 },{
333 collapsed:true
334 }]
335 }
336 ]);
337 transBtn2.destroy();
338 }
339 });
340
341 // Show/Hide handling function
342 var installShowHide = function() {
343 var cb1 = frm.findField('cb1');
344 var panel2 = Ext.ux.AccordionManager.getPanel('panel2');
345 cb1.on({
346 check:{fn:function(checkbox, checked) {
347 if(checked) {
348 panel2.show();
349 panel2.expand();
350 }
351 else {
352 panel2.collapse();
353 panel2.hide();
354 }
355 }}
356 });
357 cb1.fireEvent('check', cb1, cb1.getValue());
358 };
359 });
360
361 // end of file
