]> git.proxmox.com Git - extjs.git/blame - extjs/build/examples/classic/themes/themes.js
projects / extjs.git / blame
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (incremental) | history | HEAD
add extjs 6.0.1 sources
[extjs.git] / extjs / build / examples / classic / themes / themes.js
CommitLineData
6527f429
DM		 1Ext.require([\r
2 'Ext.window.Window',\r
3 'Ext.panel.Panel',\r
4 'Ext.toolbar.*',\r
5 'Ext.tree.Panel',\r
6 'Ext.container.Viewport',\r
7 'Ext.container.ButtonGroup',\r
8 'Ext.form.*',\r
9 'Ext.tab.*',\r
10 'Ext.slider.*',\r
11 'Ext.layout.*',\r
12 'Ext.button.*',\r
13 'Ext.grid.*',\r
14 'Ext.data.*',\r
15 'Ext.util.*',\r
16\r
17 'Ext.perf.Monitor'\r
18]);\r
19\r
20function hasOption (name) {\r
21 return window.location.search.indexOf(name) >= 0;\r
22}\r
23\r
24var isTouchTheme;\r
25\r
26if (hasOption('diag')) {\r
27 Ext.require([\r
28 'Ext.diag.layout.ContextItem',\r
29 'Ext.diag.layout.Context'\r
30 ]);\r
31}\r
32\r
33function getBasicPanel () {\r
34 return applySizing('basicPanel', {\r
35 xtype: 'panel',\r
36 title: 'Basic Panel',\r
37 animCollapse: true,\r
38 bodyPadding: 5,\r
39 html: 'Some content'\r
40 });\r
41}\r
42\r
43function getCollapsedPanel () {\r
44 return applySizing('collapsedPanel', {\r
45 xtype: 'panel',\r
46 title: 'Collapsed Panel',\r
47 animCollapse: true,\r
48 bodyPadding: 5,\r
49 html: 'Some content',\r
50 collapsible: true,\r
51 collapsed: true\r
52 });\r
53}\r
54\r
55function getMaskedPanel () {\r
56 return Ext.widget(applySizing('maskedPanel', {\r
57 xtype: 'panel',\r
58 title: 'Masked Panel',\r
59 bodyPadding: 5,\r
60 html: 'Some content',\r
61 animCollapse: true,\r
62 collapsible: true\r
63 }));\r
64}\r
65\r
66function getFramedPanel () {\r
67 return applySizing('framedPanel', {\r
68 xtype: 'panel',\r
69 title: 'Framed Panel',\r
70 animCollapse: true,\r
71 dockedItems: [{\r
72 dock: 'top',\r
73 xtype: 'toolbar',\r
74 items: [{\r
75 text: 'test'\r
76 }]\r
77 }, {\r
78 dock: 'right',\r
79 xtype: 'toolbar',\r
80 items: [{\r
81 text: 'test B'\r
82 }]\r
83 }, {\r
84 dock: 'left',\r
85 xtype: 'toolbar',\r
86 items: [{\r
87 text: 'test A'\r
88 }]\r
89 }],\r
90 html : 'Some content',\r
91 frame: true\r
92 });\r
93}\r
94\r
95function getCollapsedFramedPanel () {\r
96 return applySizing('collapsedFramedPanel', {\r
97 xtype: 'panel',\r
98 title: 'Collapsed Framed Panel',\r
99 animCollapse: true,\r
100 bodyPadding: 5,\r
101 bodyBorder: true,\r
102 html: 'Some content',\r
103 frame: true,\r
104 collapsible: true,\r
105 collapsed: true\r
106 });\r
107}\r
108\r
109function getPanelWithToolbars () {\r
110 /**\r
111 * Toolbar with a menu\r
112 */\r
113 return applySizing('panelWithToolbars', {\r
114 xtype: 'panel',\r
115 id: 'panelWithToolbars',\r
116 title: 'Basic Panel With Toolbars',\r
117 collapsible: true,\r
118 tbar: {\r
119 id: 'panelWithToolbars_tbar',\r
120 items: [{\r
121 xtype: 'buttongroup',\r
122 title: 'Button Group',\r
123 id: 'panelWithToolbars_btngroup',\r
124 columns: 2,\r
125 defaults: {\r
126 scale: 'small'\r
127 },\r
128 items: [\r
129 {\r
130 xtype:'splitbutton',\r
131 text: 'Menu Button',\r
132 iconCls: 'add16',\r
133 menu: [{text: 'Menu Button 1'}]\r
134 },\r
135 {\r
136 xtype:'splitbutton',\r
137 text: 'Cut',\r
138 icon: '../shared/icons/fam/cross.gif',\r
139 id: 'panelWithToolbars_splitbtn',\r
140 menu: [{text: 'Cut Menu Item'}]\r
141 }\r
142 ]\r
143 }]\r
144 },\r
145 bbar: {\r
146 id: 'panelWithToolbars_bbar',\r
147 items: [\r
148 'Toolbar',\r
149 ' ',\r
150 '-',\r
151 isTouchTheme ? null : {text: 'Button'},\r
152 {\r
153 text: 'Menu' + (isTouchTheme ? ' Button' : ''),\r
154 id : 'menu-btn',\r
155 menu: [\r
156 {text: 'Menu item'},\r
157 {text: 'Check 1', checked: true},\r
158 {text: 'Check 2', checked: false},\r
159 '-',\r
160 {text: 'Option 1', checked: true, group: 'opts'},\r
161 {text: 'Option 2', checked: false, group: 'opts'},\r
162 '-',\r
163 {\r
164 text: 'Sub-items',\r
165 menu: Ext.widget('menu', {\r
166 items: [\r
167 {text: 'Item 1'},\r
168 {text: 'Item 2'}\r
169 ]\r
170 })\r
171 }\r
172 ]\r
173 },\r
174 {\r
175 xtype: 'splitbutton',\r
176 text : 'Split Button',\r
177 menu : Ext.widget('menu', {\r
178 items: [\r
179 {text: 'Item 1'},\r
180 {text: 'Item 2'}\r
181 ]\r
182 })\r
183 },\r
184 {\r
185 xtype : 'button',\r
186 enableToggle: true,\r
187 pressed : true,\r
188 text : 'Toggle Button'\r
189 }\r
190 ]\r
191 },\r
192 lbar: {\r
193 id: 'panelWithToolbars_lbar',\r
194 items: [\r
195 { text: 'Left' }\r
196 ]\r
197 },\r
198 rbar: {\r
199 id: 'panelWithToolbars_rbar',\r
200 items: [\r
201 { text: 'Right' }\r
202 ]\r
203 }\r
204 });\r
205}\r
206\r
207function getFormWidgets () {\r
208 return applySizing('formWidgets', {\r
209 xtype: 'form',\r
210 id : 'form-widgets',\r
211 title: 'Form Widgets',\r
212 frame: true,\r
213\r
214 tools: [\r
215 {type:'close'},\r
216 {type:'minimize'},\r
217 {type:'maximize'},\r
218 {type:'restore'},\r
219 {type:'gear'},\r
220 {type:'pin'},\r
221 {type:'unpin'},\r
222 {type:'right'},\r
223 {type:'left'},\r
224 {type:'down'},\r
225 {type:'refresh'},\r
226 {type:'minus'},\r
227 {type:'plus'},\r
228 {type:'help'},\r
229 {type:'search'},\r
230 {type:'save'},\r
231 {type:'print'}\r
232 ],\r
233\r
234 bodyPadding: '10 20',\r
235\r
236 defaults: {\r
237 anchor : '98%',\r
238 msgTarget : 'side',\r
239 allowBlank: false\r
240 },\r
241\r
242 items: [\r
243 {\r
244 xtype: 'label',\r
245 text : 'Plain Label'\r
246 },\r
247 {\r
248 fieldLabel: 'TextField',\r
249 xtype : 'textfield',\r
250 name : 'someField',\r
251 emptyText : 'Enter a value'\r
252 },\r
253 {\r
254 fieldLabel: 'ComboBox',\r
255 xtype: 'combo',\r
256 store: ['Foo', 'Bar']\r
257 },\r
258 {\r
259 fieldLabel: 'DateField',\r
260 xtype : 'datefield',\r
261 name : 'date'\r
262 },\r
263 {\r
264 fieldLabel: 'TimeField',\r
265 name: 'time',\r
266 xtype: 'timefield'\r
267 },\r
268 {\r
269 fieldLabel: 'NumberField',\r
270 xtype : 'numberfield',\r
271 name : 'number',\r
272 emptyText : '(This field is optional)',\r
273 allowBlank: true\r
274 },\r
275 {\r
276 fieldLabel: 'TextArea',\r
277 xtype : 'textareafield',\r
278 name : 'message',\r
279 cls : 'x-form-valid',\r
280 value : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'\r
281 },\r
282 {\r
283 fieldLabel: 'Checkboxes',\r
284 xtype: 'checkboxgroup',\r
285 columns: [100,100],\r
286 items: [\r
287 {boxLabel: 'Foo', checked: true,id:'fooChk',inputId:'fooChkInput'},\r
288 {boxLabel: 'Bar'}\r
289 ]\r
290 },\r
291 {\r
292 fieldLabel: 'Radios',\r
293 xtype: 'radiogroup',\r
294 columns: [100,100],\r
295 items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]\r
296 },\r
297 {\r
298 hideLabel : true,\r
299 id : 'htmleditor',\r
300 xtype : 'htmleditor',\r
301 name : 'html',\r
302 enableColors: false,\r
303 value : 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',\r
304 height : 110\r
305 },\r
306 {\r
307 xtype : 'fieldset',\r
308 title : 'Plain Fieldset',\r
309 items: [\r
310 {\r
311 hideLabel: true,\r
312 xtype: 'radiogroup',\r
313 items: [\r
314 {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},\r
315 {boxLabel: 'Radio B', name: 'radiogrp2'}\r
316 ]\r
317 }\r
318 ]\r
319 },\r
320 {\r
321 xtype : 'fieldset',\r
322 title : 'Collapsible Fieldset',\r
323 collapsible: true,\r
324 items: [\r
325 { xtype: 'checkbox', boxLabel: 'Checkbox 1' },\r
326 { xtype: 'checkbox', boxLabel: 'Checkbox 2' }\r
327 ]\r
328 },\r
329 {\r
330 xtype : 'fieldset',\r
331 title : 'Checkbox Fieldset',\r
332 checkboxToggle: true,\r
333 items: [\r
334 { xtype: 'radio', boxLabel: 'Radio 1', name: 'radiongrp1' },\r
335 { xtype: 'radio', boxLabel: 'Radio 2', name: 'radiongrp1' }\r
336 ]\r
337 }\r
338 ],\r
339\r
340 buttons: [\r
341 {\r
342 text :'Toggle Enabled',\r
343 handler: function() {\r
344 this.up('form').items.each(function(item) {\r
345 item.setDisabled(!item.disabled);\r
346 });\r
347 }\r
348 },\r
349 {\r
350 text : 'Reset Form',\r
351 handler: function() {\r
352 Ext.getCmp('form-widgets').getForm().reset();\r
353 }\r
354 },\r
355 {\r
356 text : 'Validate',\r
357 handler: function() {\r
358 Ext.getCmp('form-widgets').getForm().isValid();\r
359 }\r
360 }\r
361 ]\r
362 });\r
363}\r
364\r
365function getBorderLayout() {\r
366 var padding = {\r
367 classic: 5,\r
368 gray: 5,\r
369 triton: 10,\r
370 'neptune-touch': 16,\r
371 'crisp-touch': 16\r
372 };\r
373\r
374 return applySizing('borderLayout', {\r
375 xtype: 'panel',\r
376 title : 'BorderLayout Panel',\r
377 layout: {\r
378 type: 'border',\r
379 padding: padding[Ext.themeName] || 8 // match padding to theme splitter size\r
380 },\r
381 collapsible: true,\r
382\r
383 defaults: {\r
384 collapsible: true,\r
385 split : true\r
386 },\r
387\r
388 items: [\r
389 {\r
390 title : 'North',\r
391 region : 'north',\r
392 html : 'North',\r
393 height : isTouchTheme ? 100 : 70\r
394 },\r
395 {\r
396 title : 'South',\r
397 region : 'south',\r
398 html : 'South',\r
399 collapseMode: 'mini',\r
400 height : isTouchTheme ? 100 : 70\r
401 },\r
402 {\r
403 title : 'West',\r
404 region : 'west',\r
405 html : 'West',\r
406 collapseMode: 'mini',\r
407 width : isTouchTheme ? 150 : 100\r
408 },\r
409 {\r
410 title : 'East',\r
411 region : 'east',\r
412 html : 'East',\r
413 width : isTouchTheme ? 150 : 100\r
414 },\r
415 {\r
416 title : 'Center',\r
417 region : 'center',\r
418 collapsible: false,\r
419 html : 'Center'\r
420 }\r
421 ]\r
422 });\r
423}\r
424\r
425function getStore () {\r
426 // Reverse order data should get sorted by the MemoryProxy\r
427 var myData = [\r
428 ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],\r
429 ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],\r
430 ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],\r
431 ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],\r
432 ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],\r
433 ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],\r
434 ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],\r
435 ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],\r
436 ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],\r
437 ['3m Co',71.72,0.02,0.03,'9/1 12:00am']\r
438 ];\r
439\r
440 return Ext.create('Ext.data.ArrayStore', {\r
441 fields: [\r
442 {name: 'company'},\r
443 {name: 'price', type: 'float', convert: null},\r
444 {name: 'change', type: 'float', convert: null},\r
445 {name: 'pctChange', type: 'float', convert: null},\r
446 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}\r
447 ],\r
448 sorters: {\r
449 property : 'company',\r
450 direction: 'ASC'\r
451 },\r
452 data: myData,\r
453 pageSize: 8\r
454 });\r
455}\r
456\r
457function getGrid () {\r
458 var store = getStore(),\r
459 pagingBar = Ext.widget('pagingtoolbar', {\r
460 store : store,\r
461 displayInfo: true,\r
462 displayMsg : 'Displaying topics {0} - {1} of {2}'\r
463 });\r
464\r
465 return applySizing('grid', {\r
466 xtype: 'gridpanel',\r
467 title: 'GridPanel',\r
468 collapsible: true,\r
469\r
470 store: store,\r
471\r
472 columns: [\r
473 {header: "Company", flex: 1, sortable: true, dataIndex: 'company'},\r
474 {header: "Price", width: 75, sortable: true, dataIndex: 'price'},\r
475 {header: "Change", width: isTouchTheme ? 90 : 80, sortable: true, dataIndex: 'change'},\r
476 {header: "% Change", width: isTouchTheme ? 105 : 95, sortable: true, dataIndex: 'pctChange'},\r
477 {header: "Last Updated", width: isTouchTheme ? 130 : 110, sortable: true, xtype: 'datecolumn', dataIndex: 'lastChange'}\r
478 ],\r
479 loadMask: true,\r
480\r
481 bbar: pagingBar,\r
482 tbar: [\r
483 {text: 'Toolbar'},\r
484 '->',\r
485 {\r
486 xtype: 'triggerfield',\r
487 trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',\r
488 trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'\r
489 }\r
490 ]\r
491 });\r
492}\r
493\r
494function getAccordion () {\r
495 var tree = Ext.create('Ext.tree.Panel', {\r
496 title: 'TreePanel',\r
497 root: {\r
498 text: 'Root Node',\r
499 expanded: true,\r
500 children: [{\r
501 text: 'Item 1',\r
502 leaf: true\r
503 }, {\r
504 text: 'Item 2',\r
505 leaf: true\r
506 }, {\r
507 text: 'Folder',\r
508 children: [{\r
509 text: 'Item 3',\r
510 leaf: true\r
511 }]\r
512 }]\r
513 }\r
514 });\r
515\r
516 return applySizing('accordion', {\r
517 title : 'Accordion and TreePanel',\r
518 collapsible: true,\r
519 layout: 'accordion',\r
520\r
521 items: [\r
522 tree, {\r
523 title: 'Item 2',\r
524 html: 'Some content'\r
525 }, {\r
526 title: 'Item 3',\r
527 html : 'Some content'\r
528 }\r
529 ]\r
530 });\r
531}\r
532\r
533function getTabs (config) {\r
534 return Ext.apply({\r
535 xtype: 'tabpanel',\r
536 activeTab: 0,\r
537 defaults: {\r
538 bodyPadding: 10\r
539 },\r
540\r
541 items: [\r
542 {\r
543 title: 'Tab 1',\r
544 html : 'Free-standing tab panel'\r
545 },\r
546 {\r
547 title : 'Tab 2',\r
548 closable: true\r
549 },\r
550 {\r
551 title : 'Tab 3',\r
552 closable: true\r
553 }\r
554 ]\r
555 }, config);\r
556}\r
557\r
558function getScrollingTabs () {\r
559 return applySizing('scrollingTabs', getTabs({\r
560 enableTabScroll: true,\r
561 plain: true,\r
562 items: [\r
563 {\r
564 title: 'Tab 1',\r
565 html : 'Tab panel 1 content'\r
566 },\r
567 {\r
568 title: 'Tab 2',\r
569 html : 'Tab panel 2 content',\r
570 closable: true\r
571 },\r
572 {\r
573 title: 'Tab 3',\r
574 html : 'Tab panel 3 content',\r
575 closable: true\r
576 },\r
577 {\r
578 title: 'Tab 4',\r
579 html : 'Tab panel 4 content',\r
580 closable: true\r
581 },\r
582 {\r
583 title: 'Tab 5',\r
584 html : 'Tab panel 5 content',\r
585 closable: true\r
586 },\r
587 {\r
588 title: 'Tab 6',\r
589 html : 'Tab panel 6 content',\r
590 closable: true\r
591 }\r
592 ]\r
593 }));\r
594}\r
595\r
596function getPlainTabs () {\r
597 return applySizing('plainTabs', getTabs({\r
598 plain: true\r
599 }));\r
600}\r
601\r
602function getDatePicker () {\r
603 return applySizing('datePicker', {\r
604 xtype: 'panel',\r
605 border: false,\r
606 items: {\r
607 xtype: 'datepicker'\r
608 }\r
609 });\r
610}\r
611\r
612function getProgressBar () {\r
613 var progressbar = Ext.widget('progressbar', {\r
614 value: 0.5\r
615 });\r
616\r
617 if (!hasOption('nopbar')) {\r
618 setTimeout(function() {\r
619 progressbar.wait({\r
620 //animate: true,\r
621 text: 'Progress text...'\r
622 });\r
623 }, 7000);\r
624 }\r
625\r
626 return applySizing('progressBar', {\r
627 xtype: 'panel',\r
628 title: 'ProgressBar / Slider',\r
629 bodyPadding: isTouchTheme ? 10 : 5,\r
630 layout: 'anchor',\r
631\r
632 items: [\r
633 progressbar,\r
634 {\r
635 xtype : 'slider',\r
636 hideLabel: true,\r
637 value : 50,\r
638 margin : '5 0 0 0',\r
639 anchor : '100%'\r
640 },\r
641 {\r
642 xtype : 'slider',\r
643 vertical: true,\r
644 value : 50,\r
645 height : isTouchTheme ? 200 : 100,\r
646 margin : '5 0 0 0'\r
647 }\r
648 ]\r
649 });\r
650}\r
651\r
652function getFramedGrid () {\r
653 return applySizing('framedGrid', {\r
654 xtype: 'grid',\r
655 title: 'Framed Grid',\r
656 collapsible: true,\r
657 store: getStore(),\r
658 multiSelect: true,\r
659 emptyText: 'No images to display',\r
660 frame: true,\r
661 enableColumnMove: false,\r
662 columns: [\r
663 {header: "Company", flex: 1, sortable: true, dataIndex: 'company'},\r
664 {header: "Price", width: isTouchTheme ? 90 : 75, sortable: true, dataIndex: 'price'},\r
665 {header: "Change", width: isTouchTheme ? 90 : 75, sortable: true, dataIndex: 'change'}\r
666 ]\r
667 });\r
668}\r
669\r
670function getBasicWindow () {\r
671 return Ext.widget('window', applySizing('basicWindow', {\r
672 id: 'basicWindow',\r
673 hidden: false,\r
674 title: 'Window',\r
675 bodyPadding: 5,\r
676 html : 'Click Submit for Confirmation Msg.',\r
677 collapsible: true,\r
678 floating : false,\r
679 closable : false,\r
680 draggable : false,\r
681 resizable: { handles: 's' },\r
682 animCollapse: true,\r
683\r
684 tbar: [\r
685 {text: 'Toolbar'}\r
686 ],\r
687 buttons: [\r
688 {\r
689 text : 'Submit',\r
690 id : 'message_box',\r
691 handler: function() {\r
692 Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');\r
693 }\r
694 }\r
695 ]\r
696 }));\r
697}\r
698\r
699function getResizer() {\r
700 return Ext.widget(applySizing('resizer', {\r
701 xtype: 'component',\r
702 style: 'background:transparent;overflow:hidden;',\r
703 html: '<div style="margin:20px">Resizable handles</div>',\r
704 resizable: {\r
705 handles: 'all',\r
706 pinned: true\r
707 }\r
708 }));\r
709}\r
710\r
711function addFormWindow () {\r
712 Ext.widget('window', {\r
713 x: 660, y: 1230,\r
714\r
715 width : 450,\r
716 // height : 360,\r
717 minWidth: 450,\r
718\r
719 title: 'Window',\r
720\r
721 bodyPadding: '5 5 0 5',\r
722\r
723 collapsible: true,\r
724 closable : false,\r
725 draggable : false,\r
726 resizable: { handles: 's' },\r
727 animCollapse: true,\r
728\r
729 items: [\r
730 {\r
731 xtype : 'fieldset',\r
732 title : 'Plain Fieldset',\r
733 items: [\r
734 {\r
735 fieldLabel: 'TextField',\r
736 xtype : 'textfield',\r
737 name : 'someField',\r
738 emptyText : 'Enter a value',\r
739 anchor : '100%'\r
740 },\r
741 {\r
742 fieldLabel: 'ComboBox',\r
743 xtype : 'combo',\r
744 store : ['Foo', 'Bar'],\r
745 anchor : '100%'\r
746 },\r
747 {\r
748 fieldLabel: 'DateField',\r
749 xtype : 'datefield',\r
750 name : 'date',\r
751 anchor : '100%'\r
752 },\r
753 {\r
754 fieldLabel: 'TimeField',\r
755 name : 'time',\r
756 xtype : 'timefield',\r
757 anchor : '100%'\r
758 },\r
759 {\r
760 fieldLabel: 'NumberField',\r
761 xtype : 'numberfield',\r
762 name : 'number',\r
763 emptyText : '(This field is optional)',\r
764 allowBlank: true,\r
765 anchor : '100%'\r
766 },\r
767 {\r
768 fieldLabel: 'TextArea',\r
769 xtype : 'textareafield',\r
770 name : 'message',\r
771 cls : 'x-form-valid',\r
772 value : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)',\r
773 anchor : '100%'\r
774 },\r
775 {\r
776 fieldLabel: 'Checkboxes',\r
777 xtype: 'checkboxgroup',\r
778 columns: [100,100],\r
779 items: [\r
780 {boxLabel: 'Foo', checked: true,id:'winFooChk',inputId:'winFooChkInput'},\r
781 {boxLabel: 'Bar'}\r
782 ]\r
783 },\r
784 {\r
785 xtype: 'radiogroup',\r
786 columns: [100,100],\r
787 fieldLabel: 'Radio Group',\r
788 items: [\r
789 {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},\r
790 {boxLabel: 'Radio B', name: 'radiogrp2'}\r
791 ]\r
792 }\r
793 ]\r
794 }\r
795 ],\r
796\r
797 buttons: [\r
798 {\r
799 text : 'Submit',\r
800 handler: function() {\r
801 Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');\r
802 }\r
803 }\r
804 ]\r
805 }).show();\r
806}\r
807\r
808var sizing = {\r
809 mainContainer: {\r
810 classic: [1130, 1460],\r
811 neptune: [1250, 1600],\r
812 'neptune-touch': [790, 4140]\r
813 },\r
814 basicPanel: {\r
815 classic: [150, 90, 20, 20],\r
816 neptune: [150, 130, 20, 20],\r
817 'neptune-touch': [250, 150, 0, 0]\r
818 },\r
819 collapsedPanel: {\r
820 classic: [150, 70, 20, 120],\r
821 neptune: [150, 120, 20, 160],\r
822 'neptune-touch': [250, 150, 0, 170]\r
823 },\r
824 maskedPanel: {\r
825 classic: [130, 170, 180, 20],\r
826 neptune: [130, 260, 180, 20],\r
827 'neptune-touch': [230, 320, 270, 0]\r
828 },\r
829 framedPanel: {\r
830 classic: [170, 100, 320, 20],\r
831 neptune: [200, 150, 320, 20],\r
832 'neptune-touch': [270, 150, 520, 0]\r
833 },\r
834 collapsedFramedPanel: {\r
835 classic: [170, 60, 320, 130],\r
836 neptune: [200, 100, 320, 180],\r
837 'neptune-touch': [270, 150, 520, 170]\r
838 },\r
839 basicWindow: {\r
840 classic: [150, 170, 500, 20, {\r
841 minWidth: 150,\r
842 minHeight: 150,\r
843 maxHeight: 170\r
844 }],\r
845 neptune: [150, 260, 530, 20, {\r
846 minWidth: 150,\r
847 minHeight: 200,\r
848 maxHeight: 260\r
849 }],\r
850 'neptune-touch': [250, 260, 0, 340, {\r
851 minWidth: 150,\r
852 minHeight: 200,\r
853 maxHeight: 260\r
854 }]\r
855 },\r
856 panelWithToolbars: {\r
857 classic: [450, 170, 660, 20],\r
858 neptune: [500, 260, 690, 20],\r
859 'neptune-touch': [520, 260, 270, 340]\r
860 },\r
861 formWidgets: {\r
862 classic: [630, 750, 20, 200],\r
863 neptune: [660, 750, 20, 290],\r
864 triton: [660, 1000, 20, 290],\r
865 'neptune-touch': [790, 940, 0, 620]\r
866 },\r
867 borderLayout: {\r
868 classic: [450, 350, 660, 200],\r
869 neptune: [500, 350, 690, 290],\r
870 'neptune-touch': [790, 500, 0, 1580]\r
871 },\r
872 grid: {\r
873 classic: [450, 200, 660, 560],\r
874 neptune: [500, 200, 690, 650],\r
875 triton: [500, 300, 690, 650],\r
876 'neptune-touch': [790, 400, 0, 2100]\r
877 },\r
878 accordion: {\r
879 classic: [450, 240, 660, 770],\r
880 neptune: [500, 240, 690, 860],\r
881 triton: [500, 340, 690, 960],\r
882 'neptune-touch': [790, 340, 0, 2520]\r
883 },\r
884 scrollingTabs: {\r
885 classic: [310, 150, 20, 960],\r
886 neptune: [325, 150, 20, 1050],\r
887 triton: [325, 150, 20, 1300],\r
888 'neptune-touch': [420, 200, 0, 2880]\r
889 },\r
890 plainTabs: {\r
891 classic: [310, 150, 340, 960],\r
892 neptune: [325, 150, 355, 1050],\r
893 triton: [325, 150, 355, 1300],\r
894 'neptune-touch': [350, 200, 440, 2880]\r
895 },\r
896 datePicker: {\r
897 classic: [180, undefined, 20, 1120],\r
898 neptune: [212, undefined, 20, 1210],\r
899 triton: [310, undefined, 20, 1460],\r
900 'neptune-touch': [282, undefined, 0, 3780]\r
901 },\r
902 progressBar: {\r
903 classic: [450, 200, 660, 1020],\r
904 neptune: [500, 200, 690, 1110],\r
905 triton: [500, 220, 690, 1310],\r
906 'neptune-touch': [790, 340, 0, 3100]\r
907 },\r
908 framedGrid: {\r
909 classic: [450, 180, 660, 1230],\r
910 neptune: [500, 180, 690, 1320],\r
911 triton: [500, 280, 690, 1540],\r
912 'neptune-touch': [790, 300, 0, 3460]\r
913 },\r
914 resizer: {\r
915 classic: [440, 220, 210, 1120],\r
916 neptune: [440, 220, 240, 1210],\r
917 triton: [340, 220, 340, 1460],\r
918 'neptune-touch': [488, 314, 302, 3780]\r
919 }\r
920};\r
921\r
922var theme;\r
923function getSizing(id) {\r
924 var theme = Ext.themeName,\r
925 info;\r
926\r
927 if (theme == 'gray') {\r
928 // same dimensions\r
929 theme = 'classic';\r
930 }\r
931\r
932 info = sizing[id][theme];\r
933 if (!info && theme === 'crisp') {\r
934 // default to neptune for crisp\r
935 info = sizing[id]['neptune'];\r
936 }\r
937 if (!info && theme === 'triton') {\r
938 // default to neptune for triton\r
939 info = sizing[id]['neptune'];\r
940 }\r
941 if (!info && theme === 'crisp-touch') {\r
942 // default to neptune-touch for crisp\r
943 info = sizing[id]['neptune-touch'];\r
944 }\r
945\r
946 return info;\r
947}\r
948\r
949function applySizing(id, config) {\r
950\r
951 var info = getSizing(id),\r
952 keys = ['width', 'height', 'x', 'y'],\r
953 len = keys.length,\r
954 i = 0,\r
955 val;\r
956\r
957 if (info) {\r
958 for (; i < len; ++i) {\r
959 val = info[i];\r
960 if (val !== undefined) {\r
961 config[keys[i]] = val;\r
962 }\r
963 }\r
964\r
965 // Any other config options\r
966 Ext.applyIf(config, info[len]);\r
967 }\r
968\r
969 return config;\r
970}\r
971\r
972function doThemes () {\r
973 var time = Ext.perf.getTimestamp(),\r
974 maskedPanel;\r
975\r
976 var items = [\r
977 getBasicPanel(),\r
978 getCollapsedPanel(),\r
979 maskedPanel = getMaskedPanel(),\r
980 getFramedPanel(),\r
981 getCollapsedFramedPanel(),\r
982 getBasicWindow(),\r
983 getPanelWithToolbars(),\r
984 getFormWidgets(),\r
985 getBorderLayout(),\r
986 getGrid(),\r
987 getAccordion(),\r
988 getScrollingTabs(),\r
989 getPlainTabs(),\r
990 getDatePicker(),\r
991 getProgressBar(),\r
992 getFramedGrid(),\r
993 getResizer(),\r
994 0 // end of list (makes commenting out any of the above easy\r
995 ];\r
996 items.pop(); // remove the 0 on the end\r
997\r
998 mainContainer = Ext.create('Ext.container.Container', applySizing('mainContainer', {\r
999 id: 'main-container',\r
1000 renderTo: document.body,\r
1001 layout: 'absolute',\r
1002 items: items\r
1003 }));\r
1004\r
1005 //addFormWindow();\r
1006\r
1007 setTimeout(function() {\r
1008 // we may comment out the creation of this for testing\r
1009 if (maskedPanel) {\r
1010 maskedPanel.setLoading({\r
1011 msg: 'Loading...',\r
1012 useTargetEl: true\r
1013 });\r
1014 }\r
1015\r
1016 if (!hasOption('notips')) {\r
1017 Ext.QuickTips.init();\r
1018 }\r
1019 }, 2000);\r
1020\r
1021 time = Ext.perf.getTimestamp() - time;\r
1022 Ext.log('total time: ' + Math.round(time));\r
1023}\r
1024\r
1025Ext.onReady(function() {\r
1026 isTouchTheme = Ext.themeName === 'neptune-touch' || Ext.themeName === 'crisp-touch';\r
1027 if (!hasOption('perf')) {\r
1028 if (hasOption('delay')) {\r
1029 setTimeout(doThemes, 1000);\r
1030 } else {\r
1031 doThemes();\r
1032 }\r
1033 } else {\r
1034 setTimeout(function () {\r
1035 var a = document.createElement('a');\r
1036 a.innerHTML = 'Page Analyzer';\r
1037 a.style.position = "absolute";\r
1038 a.style.left = "5px";\r
1039 a.style.top = "5px";\r
1040 a.href = 'javascript:void(window.open("../page-analyzer/page-analyzer.html","pageAn"))';\r
1041 document.body.appendChild(a);\r
1042\r
1043 Ext.Perf.setup();\r
1044 Ext.Perf.monitor('onReady', doThemes);\r
1045 Ext.Perf.report();\r
1046 }, 1000);\r
1047 }\r
1048});\r
ExtJS JS Framework