Example application code:
1 // vim: ts=2:sw=2:nu:fdc=4:nospell
2 /**
3 * Ext.ux.InfoPanel and Ext.ux.Accordion Example Application
4 *
5 * @author Ing. Jozef Sakalos
6 * @version $Id: accordion.js 124 2007-08-02 10:27:33Z jozo $
7 *
8 */
9
10 // set blank image to local file
11 Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
12
13 // {{{
14 /**
15 * Ext.example class
16 *
17 * To display sliding popup. Borrowed from ExtJS examples.
18 *
19 * @class Ext.exammple
20 * @singleton
21 *
22 */
23 Ext.example = function() {
24 var msgCt;
25
26 function createBox(t, s){
27 return ['<div class="msg">',
28 '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
29 '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t,
30 '</h3>', s, '</div></div></div>',
31 '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
32 '</div>'].join('');
33 }
34 return {
35 msg : function(title, format){
36 if(!msgCt){
37 msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
38 }
39 msgCt.alignTo(document, 'bl-bl', [10, -90]);
40 var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
41 var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
42 m.slideIn('b').pause(1).ghost("b", {remove:true});
43 }
44 };
45 }();
46 // }}}
47
48 // run this function when document becomes ready
49 Ext.onReady(function() {
50
51 var iconPath = '../img/silk/icons/';
52
53 // {{{
54 // function to remove loading mask
55 var unmask = function() {
56 var mask = Ext.get('loading-mask');
57 var msg = Ext.get('loading-msg');
58 if(mask && msg) {
59 mask.shift({
60 xy:msg.getXY()
61 , width:msg.getWidth()
62 , height:msg.getHeight()
63 , remove: true
64 , duration: 1.6
65 , opacity: 0.3
66 , easing: 'bounceOut'
67 , callback: function(){Ext.fly(msg).remove();}
68 });
69 }
70 };
71 // }}}
72
73 // install onclick handler to unmask body (for debugging)
74 Ext.fly('loading-mask').on('click', unmask);
75
76 // initialize state manager, we will use cookies
77 Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
78
79 // initialize QuickTips
80 Ext.QuickTips.init();
81 Ext.apply(Ext.QuickTips, {interceptTitles: true});
82
83 // {{{
84 // create layout
85 var layout = new Ext.BorderLayout(document.body, {
86 hideOnLayout: true
87 , north: { split: false, initialSize: 34, titlebar: false }
88 , west: {
89 split: true
90 , initialSize: 230
91 , minSize: 230
92 , maxSize: 300
93 , titlebar: false
94 , collapsible: true
95 , showPin: true
96 , animate: true
97 }
98 , center: {
99 titlebar: true
100 , autoScroll: false
101 }
102 , south: {
103 titlebar: true
104 , split: true
105 , initialSize: 56
106 , collapsible: true
107 , collapsed: true
108 , hidden: false
109 , collapsedTitle: 'South'
110 , animate: true
111 , showPin: true
112 }
113 , east: {
114 titlebar: true
115 , split: false
116 , initialSize: 142
117 , collapsible: false
118 , autoScroll: true
119 }
120 });
121 // }}}
122 // {{{
123 // create accordion in west region
124 var acc = new Ext.ux.Accordion('west', {
125 title: 'Accordion'
126 , body: 'west-body'
127 , fitContainer: true
128 , fitToFrame: true
129 , useShadow: true
130 , adjustments: [0, -26]
131 // , draggable: false
132 });
133 // }}}
134 // {{{
135 // create global toolbar
136 acc.toolbar = new Ext.Toolbar('acc-tb-global', [
137
138 // reset order
139 { tooltip: 'Reset order'
140 , cls: 'x-btn-icon'
141 , icon: iconPath + 'application_put.png'
142 , scope: acc
143 , handler: acc.resetOrder
144 }
145
146 // undockable mode
147 , { tooltip: 'Undockable mode'
148 , cls: 'x-btn-icon'
149 , enableToggle: true
150 , id: 'btn-undockable'
151 , icon: iconPath + 'layout_content.png'
152 , scope: acc
153 , handler: function(btn, e) {
154 this.setUndockable(btn.pressed);
155 }
156 }
157
158 // independent mode
159 , { tooltip: 'Independent mode'
160 , cls: 'x-btn-icon'
161 , enableToggle: true
162 , id: 'btn-independent'
163 , icon: iconPath + 'application_tile_vertical.png'
164 , scope: acc
165 , handler: function(btn, e) {
166 if(!btn.pressed) {
167 this.collapseAll(false);
168 }
169 this.setIndependent(btn.pressed);
170 }
171 }
172
173 // collapse all
174 , { tooltip: 'Collapse all (also pinned)'
175 , cls: 'x-btn-icon'
176 , icon: iconPath + 'application_view_list.png'
177 , scope: acc
178 , handler: function(btn, e) {
179 this.collapseAll(true);
180 }
181 }
182
183 // expand all
184 , { tooltip: 'Expand all (in independent mode)'
185 , cls: 'x-btn-icon'
186 , icon: iconPath + 'application_view_tile.png'
187 , scope: acc
188 , handler: function(btn, e) {
189 this.expandAll();
190 }
191 }
192
193 // use shadows
194 , { tooltip: 'Use shadows for undocked panels'
195 , id: 'btn-shadow'
196 , cls: 'x-btn-icon'
197 , enableToggle: true
198 , icon: iconPath + 'contrast_low.png'
199 , scope: acc
200 , handler: function(btn, e) {
201 this.setShadow(btn.pressed);
202 }
203 }
204
205 // separator
206 , '-'
207
208 // find text
209 , 'Find:'
210
211 // search text input field
212 , new Ext.form.TextField({
213 id: 'find-field'
214 , msgTarget:'side'
215 , autoCreate: {
216 tag:'input'
217 , type:'text'
218 , qtip:'Try to type <b>"acc"</b> here.<br>'
219 + 'Then switch to independent mode and type <b>"note"</b> here.<br>'
220 + 'You can try also <b>"dev"</b> and <b>"comp"</b>'
221 , size:3
222 }
223 })
224 ]);
225 // }}}
226 // {{{
227 // add panels to west accordion
228
229 // Introduction
230 var panel1 = new Ext.ux.InfoPanel('panel-1', {
231 trigger:'title', collapsed:true
232 , collapsedIcon: iconPath + 'lightbulb_off.png'
233 , expandedIcon: iconPath + 'lightbulb.png'
234 , showPin: true
235 , collapseOnUnpin: true
236 , iconMenu: new Ext.menu.Menu({
237 id: 'panel1-title-menu'
238 , items: [
239 new Ext.menu.Item({
240 text: 'Icon menu'
241 , disabled: true
242 })
243 , new Ext.menu.Separator()
244 , new Ext.menu.Item({
245 text: 'Expand - example item'
246 , icon: iconPath + 'arrow_down.png'
247 , handler: function(item) {
248 item.parentMenu.panel.expand();
249 }
250 })
251 , new Ext.menu.Item({
252 text: 'Collapse - example item'
253 , icon: iconPath + 'arrow_up.png'
254 , handler: function(item) {
255 item.parentMenu.panel.collapse();
256 }
257 })
258 , new Ext.menu.Item({
259 text: 'Show panel id - example item'
260 , icon: iconPath + 'asterisk_yellow.png'
261 , handler: function(item) {
262 alert('Panel id is "' + item.parentMenu.panel.id + '"');
263 }
264 })
265 ]})
266 });
267 var titleMenu = new Ext.menu.Menu({
268 id: 'panel1-title-menu'
269 , items: [
270 new Ext.menu.Item({
271 text:'Title context menu'
272 , disabled: true
273 })
274 , '-'
275 , new Ext.menu.Item({
276 text: 'Expand - example item'
277 , icon: iconPath + 'arrow_down.png'
278 , handler: function(item) {
279 item.parentMenu.panel.expand();
280 }
281 })
282 , new Ext.menu.Item({
283 text: 'Collapse - example item'
284 , icon: iconPath + 'arrow_up.png'
285 , handler: function(item) {
286 item.parentMenu.panel.collapse();
287 }
288 })
289 , new Ext.menu.Item({
290 text: 'Show panel id - example item'
291 , icon: iconPath + 'asterisk_yellow.png'
292 , handler: function(item) {
293 alert('Panel id is "' + item.parentMenu.panel.id + '"');
294 }
295 })
296 ]});
297 panel1.setTitleMenu(titleMenu);
298
299 // panel1.on('beforeexpand', function(panel) {
300 // panel.el.setStyle('position','absolute');
301 // });
302 // panel1.on('pinned', function(panel) {
303 // panel.el.setStyle('position','relative');
304 // });
305
306 // example of installing custom panel event handlers
307 acc.add(panel1);
308 panel1.on('expand', function(panel) {
309 Ext.example.msg('expand event handler', 'Panel: ' + panel.getTitle());
310 // panel.setIcon(iconPath + 'lightbulb.png');
311 });
312
313 panel1.on('collapse', function(panel) {
314 Ext.example.msg('collapse event handler', 'Panel: ' + panel.getTitle());
315 // panel.setIcon(iconPath + 'lightbulb_off.png');
316 });
317
318 // extjs
319 acc.add(new Ext.ux.InfoPanel('panel-2', {
320 trigger:'title', collapsed:true
321 , expandedIcon: iconPath + 'brick.png'
322 , collapsedIcon: iconPath + 'brick_go.png'
323 , showPin: true
324 , collapseOnUnpin: true
325 }));
326
327 // usage
328 var panel3 = acc.add(new Ext.ux.InfoPanel('panel-3', {
329 trigger:'title', collapsed:true
330 , icon: iconPath + 'layout.png'
331 }));
332
333 // create toolbar for panel 3
334 var toolbar3 = panel3.createToolbar();
335
336 // add greedy spacer to align button right
337 Ext.fly(toolbar3.addSpacer().getEl().parentNode).setStyle('width', '100%');
338 toolbar3.add([{
339 icon: iconPath + 'application_put.png'
340 , cls: 'x-btn-text-icon'
341 , text: 'Reset order'
342 , scope: acc
343 , handler: acc.resetOrder
344 }]);
345
346 // drag & drop
347 var panel4 = acc.add(new Ext.ux.InfoPanel('panel-4', {
348 trigger:'title', collapsed:true
349 , icon: iconPath + 'mouse.png'
350 }));
351
352 // create bottom toolbar for panel 4
353 var toolbar4 = panel4.createToolbar([], true);
354
355 // add greedy spacer to align button right
356 Ext.fly(toolbar4.addSpacer().getEl().parentNode).setStyle('width', '100%');
357 toolbar4.add([{
358 icon: iconPath + 'mouse.png'
359 , cls: 'x-btn-text-icon'
360 , text: 'Button'
361 , scope: this
362 , handler: function() {
363 alert('You clicked me');
364 }
365 }]);
366
367 // configuration options
368 acc.add(new Ext.ux.InfoPanel('panel-5', {
369 trigger:'title'
370 , collapsed:true
371 , icon: iconPath + 'wrench.png'
372 // , autoScroll: true
373 }));
374
375 // custom functions
376 var panel6 = acc.add(new Ext.ux.InfoPanel({
377 title:'6. Custom functions'
378 , collapsedIcon: iconPath + 'script_code.png'
379 , expandedIcon: iconPath + 'script_code_red.png'
380 , id:'panel-6'
381 , autoCreate: {
382 tag:'div'
383 }
384 }));
385
386 // set content for panel 6
387 panel6.update(
388 '<div class="text-content">'
389 + '<p>Both Accordion and InfoPanel expose an Application Programming Interface (API) that makes'
390 + ' implementation of custom functions easy.</p>'
391 + '<p>The above Search function is one example of that. Try to'
392 + ' type three or more characters in the Find input.</p>'
393 + '</div>'
394 );
395
396 // theme selector
397 var panel7 = acc.add(new Ext.ux.InfoPanel('panel-7', {
398 icon: iconPath + 'palette.png'
399 , showPin: true
400 , minWidth: 200
401 , minHeight: 100
402 }));
403 var ctheme = new Ext.form.ComboBox({
404 typeAhead: true
405 , triggerAction: 'all'
406 , transform: 'theme-combo'
407 , forceSelection: true
408 , width: 140
409 , listWidth: 158
410 });
411
412 // change theme on combo select
413 ctheme.on('select', function() {
414 Ext.util.CSS.swapStyleSheet('theme', '../extjs/resources/css/' + this.getValue());
415 }, ctheme);
416
417 // donate
418 var panel8 = acc.add(new Ext.ux.InfoPanel('panel-8', {
419 icon: iconPath + 'money.png'
420 }));
421 // {{{
422 // add google search panel
423 var pnGoogle = acc.add(new Ext.ux.InfoPanel.GoogleSearch('google-search', {
424 icon: iconPath + 'magnifier.png'
425 , searchBtnIcon: iconPath + 'magnifier.png'
426 , searchTextSize: 25
427 , searchResultIframe: 'center-result'
428 }));
429 pnGoogle.searchButton.on({
430 click: {
431 fn: function() {
432 layout.getRegion('center').getTabs().getTab('center-result').activate();
433 }}
434 });
435
436 // // create nicer Ext form
437 // var gsForm = new Ext.BasicForm(pnGoogle.body.select('form').item(0), {});
438 //
439 // // disable submit
440 // gsForm.el.dom.onsubmit = function() { return false };
441 //
442 // // beautify search text input
443 // var gsText = new Ext.form.TextField({});
444 // gsText.applyTo(gsForm.el.select('input[type=text]').item(0));
445 // gsText.el.dom.size = 25;
446 //
447 // // remove original google button
448 // Ext.fly('sbb').remove();
449 //
450 // // create new nicer button
451 // var gsBtn = new Ext.Button(gsForm.el, {
452 // text: "Search"
453 // , icon: iconPath + 'magnifier.png'
454 // , cls: 'x-btn-text-icon'
455 //// , name: 'sa'
456 // , type: 'submit'
457 //// , id: 'sbb'
458 //// , value: 'Search'
459 // , handler: function() {
460 // // activate search results tab
461 // layout.getRegion('center').getTabs().getTab('center-result').activate();
462 //
463 // // create google search URL
464 // var inputs = gsForm.el.select('input');
465 // var getPars = [];
466 // inputs.each(function(el) {
467 // if('radio' === el.dom.type && !el.dom.checked) {
468 // return;
469 // }
470 // getPars.push(el.dom.name + '=' + encodeURIComponent(el.dom.value));
471 // });
472 // var gsURL = 'http://www.google.com/custom?' + getPars.join('&');
473 //
474 // // set iframe src attribute
475 // Ext.get('center-result').dom.src = gsURL;
476 //
477 // }
478 // });
479 // }}}
480
481 // useful links
482 var panel10 = acc.add(new Ext.ux.InfoPanel('panel-10', {
483 icon: iconPath + 'world_link.png'
484 }));
485 panel10.body.on({
486 click: {
487 stopEvent: true
488 , delegate: 'a'
489 , scope: null
490 , fn: function(e, target) {
491 layout.getRegion('center').getTabs().getTab('center-result').activate();
492 Ext.get('center-result').dom.src = target.href;
493 }
494 }
495 });
496 // }}}
497 // {{{
498 // create fitHeight accordion
499 var acc2 = new Ext.ux.Accordion('acc2-body', {
500 body: 'acc2-body'
501 , boxWrap: true
502 , wrapEl: 'acc2-wrap'
503 , fitContainer: true
504 , fitToFrame: true
505 , fitHeight: true
506 , initialHeight: 240
507 , desktop: 'center-accordions'
508 , forceOrder: true
509 , keepState: true
510 // , animate: false
511 });
512 // }}}
513 // {{{
514 // add panels to fitHeight accordion
515 acc2.add(new Ext.ux.InfoPanel('panel2-1', {
516 icon: iconPath + 'calendar_view_month.png'
517 , autoScroll: true
518 , buttonPosition: 'left'
519 , titleTextAlign: 'right'
520 , iconPosition: 'right'
521 // , showPin: true
522 }));
523
524 var panel22 = acc2.add(new Ext.ux.InfoPanel('panel2-2', {
525 icon: iconPath + 'database_table.png'
526 // , showPin: true
527 }));
528
529 // test for Craig
530 // var simple = new Ext.form.Form({url:'#'});
531 // simple.fieldset(
532 // {legend:'Please Reply'},
533 // new Ext.form.TextArea({fieldLabel:'Subject', width:150}),
534 // new Ext.form.TextArea({fieldLabel:'Body', width:150, height:100}));
535 // simple.render(panel22.body);
536
537 acc2.add(new Ext.ux.InfoPanel('panel2-3', {
538 icon: iconPath + 'cart.png'
539 }));
540
541 acc2.add(new Ext.ux.InfoPanel('panel2-4', {
542 icon: iconPath + 'email.png'
543 }));
544
545 acc2.add(new Ext.ux.InfoPanel('panel2-5', {
546 icon: iconPath + 'feed.png'
547 }));
548 // }}}
549 // {{{
550 // resizing of fitHeight accordion
551 var acc2Ct = Ext.get('acc2-ct');
552 var resizer = new Ext.Resizable(acc2Ct, {
553 handles:'s e se'
554 , transparent: true
555 , minHeight: 180 //244
556 , minWidth: 150 // 224
557 , pinned: true
558 });
559 resizer.on({
560 beforeresize: {
561 scope:acc2
562 , fn: function(r, e) {
563
564 // save old sizes
565 r.oldSize = acc2Ct.getSize();
566 r.oldAccSize = this.body.getSize();
567 }}
568 , resize: {
569 scope:acc2
570 , fn: function(r, w, h, e) {
571
572 // calculate deltas
573 var dw, dh;
574 dw = w - r.oldSize.width;
575 dh = h - r.oldSize.height;
576
577 // resize Accordion
578 this.setSize(r.oldAccSize.width + dw, r.oldAccSize.height + dh);
579 var dockWidth = this.body.getWidth(true);
580 if(Ext.isIE) {
581 this.items.each(function(panel) {
582 panel.body.setWidth(dockWidth);
583 })
584 }
585
586 }}
587 });
588 // }}}
589 // {{{
590 // Accordion in dialog
591 var accDlgShow = function(btn, e) {
592
593 var dpanel4, stickyNote;
594
595 // {{{
596 // lazy create the dialog
597 if(!this.dlg) {
598
599 // create the BasicDialog
600 this.dlg = new Ext.BasicDialog('acc-dialog', {
601 width: 220
602 , height: 220
603 , x: 560
604 , y: 144
605 , modal: false
606 , shadow: true
607 , proxyDrag: true
608 });
609
610 // add hide on escape pressed handler
611 this.dlg.addKeyListener(27, this.dlg.hide, this.dlg);
612
613 // create the Accordion
614 this.acc = new Ext.ux.Accordion(this.dlg.body, {
615 fitHeight: true
616 , fitToFrame: true
617 , fitContainer: true
618 , desktop: 'center-accordions'
619 , autoScroll: false
620 });
621
622 // add panels
623 this.acc.add(new Ext.ux.InfoPanel('dpanel-1', {
624 icon: iconPath + 'application_home.png'
625 }));
626
627 this.acc.add(new Ext.ux.InfoPanel('dpanel-2', {
628 icon: iconPath + 'emoticon_happy.png'
629 }));
630
631 this.acc.add(new Ext.ux.InfoPanel('dpanel-3', {
632 icon: iconPath + 'mouse.png'
633 }));
634
635 // inform accordion of dialog resize
636 this.dlg.on('resize', function(dlg, w, h) {
637 this.setSize(dlg.body.getWidth(), dlg.body.getHeight());
638 }, this.acc);
639
640 // update text of show/hide button
641 this.dlg.on('show', function() {
642 btn.setText('Hide Accordion Dialog');
643 this.setPanelHeight();
644
645 // fix the firefox cursor bug
646 // var dlgCt;
647 // if(Ext.isGecko) {
648 // dlgCt = Ext.get('acc-dialog');
649 // dlgCt.setStyle('overflow','');
650 // dlgCt.setStyle.defer(10, dlgCt, ['overflow','auto']);
651 // }
652
653 }, this.acc);
654 this.dlg.on('hide', function() {btn.setText('Show Accordion Dialog');});
655
656 // this.acc.restoreState();
657 // if(!dpanel4.collapsed) {
658 // stickyNote.fitToParent();
659 // }
660
661 } // end of dlg lazy creation
662 // }}}
663
664 // show/hide dialog on button click
665 if(this.dlg.isVisible()) {
666 this.dlg.hide(btn.el);
667 }
668 else {
669 this.dlg.show(btn.el);
670 }
671 }; // end of function accDlgShow
672 // }}}
673 // {{{
674 // create show/hide dialog button
675 var btnDlg = new Ext.Button('btn-show-dlg', {
676 icon: iconPath + 'application.png'
677 , cls: 'x-btn-text-icon'
678 , text: 'Show Accordion Dialog'
679 , scope: accDlgShow
680 , handler: accDlgShow
681 });
682 // }}}
683 // {{{
684 // independent panels example
685 var ipanel1 = new Ext.ux.InfoPanel('ipanel-1', {
686 collapsed: false
687 , animate: true
688 });
689 var ipanel2 = new Ext.ux.InfoPanel('ipanel-2', {
690 animate: false
691 });
692 var ipanel3 = new Ext.ux.InfoPanel('ipanel-3', {
693 trigger: 'button'
694 , animate: true
695 });
696 var ipanel4 = new Ext.ux.InfoPanel('ipanel-4', {
697 title:'4. Container from markup'
698 , animate: true
699 , content:
700 '<div class="text-content">'
701 + '<h3>Container from markup, body from code</h3>'
702 // + '<p> </p>'
703 + '<p>Markup:<p>'
704 + '<pre class="code">'
705 + '<div id="ipanel-4"></div>'
706 + '</pre>'
707 + '<p>Code:<p>'
708 + '<pre class="code">'
709 + 'new Ext.ux.InfoPanel(\'ipanel-4\', {\n'
710 + ' title:\'4. Container from...\'\n'
711 + ' , content:\'This text.\'\n'
712 + ' , useShadow:true\n'
713 + ' , easingCollapse: \'backIn\'\n'
714 + ' , easingExpand: \'backOut\'\n'
715 + '});'
716 + '</pre>'
717 + '</div>'
718 , useShadow: true
719 , easingCollapse: 'backIn'
720 , easingExpand: 'backOut'
721 , desktop: 'panels-content'
722 });
723
724 var ipanel5 = new Ext.ux.InfoPanel('ipanel-5', {
725 useShadow: true
726 , draggable: true
727 , desktop:'panels-content'
728 , duration: 1.0
729 , animate: true
730 });
731
732 var ipanel6 = new Ext.ux.InfoPanel({
733 title: '6. Auto-created panel, no markup'
734 , id:'ipanel-6'
735 , desktop: 'panels-content'
736 , draggable: true
737 , useShadow: true
738 , animate: true
739 , autoCreate: {
740 tag:'div'
741 , children:[{
742 tag:'div'
743 , cls:'text-content'
744 , html: '<h3>No html markup, autoCreate object.</h3>'
745 + '<p> </p>'
746 + '<p>Code:</p>'
747 + '<pre class="code">'
748 + 'new Ext.ux.InfoPanel({\n'
749 + ' title: \'6. Auto-created...\'\n'
750 + ' , id: \'ipanel-6\'\n'
751 + ' , desktop: \'panels-content\'\n'
752 + ' , draggable: true\n'
753 + ' , useShadow: true\n'
754 + ' , autoCreate: {\n'
755 + ' tag: \'div\'\n'
756 + ' , children:[{\n'
757 + ' tag: \'div\'\n'
758 + ' , cls: \'text-content\'\n'
759 + ' , html: \'This text.\'\n'
760 + ' }]\n'
761 + ' }\n'
762 + '});'
763 + '</pre>'
764 }]
765 }
766 });
767
768 var ipanel7 = new Ext.ux.InfoPanel({
769 title: '7. Auto-created, body from markup'
770 , id: 'ipanel-7'
771 , desktop: 'panels-content'
772 , bodyEl: 'ipanel-7-body'
773 , autoCreate: true
774 , draggable: true
775 , useShadow: true
776 // , resizable: true
777 , animate: true
778 });
779
780 // {{{
781 if(showGrid) {
782 var ipanel8 = new Ext.ux.InfoPanel({
783 id: 'ipanel-8'
784 , title: '8. Grid in the panel'
785 , reiszable: true
786 , collapsed: true
787 , draggable: true
788 , resizable: true
789 , animate: true
790 , useShadow: true
791 // , autoScroll: true
792 , desktop: 'panels-content'
793 , autoCreate: {
794 tag:'div'
795 , style: 'position:absolute;width:600px;left:244px;top:130px'
796 , children: [{
797 tag: 'div'
798 , style: 'height:300px;overflow:auto'
799 , id: 'grid-ct'
800 }]
801 }
802 });
803
804 // some data yanked off the web
805 var myData = [
806 ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
807 ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
808 ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
809 ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
810 ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
811 ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
812 ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
813 ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
814 ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
815 ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
816 ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
817 ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
818 ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
819 ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
820 ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
821 ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
822 ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
823 ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
824 ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
825 ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
826 ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
827 ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
828 ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
829 ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
830 ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
831 ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
832 ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
833 ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
834 ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
835 ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
836 ];
837
838 var ds = new Ext.data.Store({
839 proxy: new Ext.data.MemoryProxy(myData),
840 reader: new Ext.data.ArrayReader({}, [
841 {name: 'company'