Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / layout-browser.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">
9 //
10 // This is the main layout definition.
11 //
12 Ext.onReady(function(){
13         
14         Ext.QuickTips.init();
15         
16         // This is an inner body element within the Details panel created to provide a "slide in" effect
17         // on the panel body without affecting the body's box itself.  This element is created on
18         // initial use and cached in this var for subsequent access.
19         var detailEl;
20         
21         // This is the main content center region that will contain each example layout panel.
22         // It will be implemented as a CardLayout since it will contain multiple panels with
23         // only one being visible at any given time.
24         var contentPanel = {
25                 id: 'content-panel',
26                 region: 'center', // this is what makes this panel into a region within the containing layout
27                 layout: 'card',
28                 margins: '2 5 5 0',
29                 activeItem: 0,
30                 border: false,
31                 items: [
32                         // from basic.js:
33                         start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
34                         // from custom.js:
35                         rowLayout, centerLayout,
36                         // from combination.js:
37                         absoluteForm, tabsNestedLayouts
38                 ]
39         };
40     
41         // Go ahead and create the TreePanel now so that we can use it below
42     var treePanel = new Ext.tree.TreePanel({
43         id: 'tree-panel',
44         title: 'Sample Layouts',
45         region:'north',
46         split: true,
47         height: 300,
48         minSize: 150,
49         autoScroll: true,
50         
51         // tree-specific configs:
52         rootVisible: false,
53         lines: false,
54         singleExpand: true,
55         useArrows: true,
56         
57         loader: new Ext.tree.TreeLoader({
58             dataUrl:'tree-data.json'
59         }),
60         
61         root: new Ext.tree.AsyncTreeNode()
62     });
63     
64         // Assign the changeLayout function to be called on tree node click.
65     treePanel.on('click', function(n){
66         var sn = this.selModel.selNode || {}; // selNode is null on initial selection
67         if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
68                 Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
69                 if(!detailEl){
70                         var bd = Ext.getCmp('details-panel').body;
71                         bd.update('').setStyle('background','#fff');
72                         detailEl = bd.createChild(); //create default empty div
73                 }
74                 detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
75         }
76     });
77     
78         // This is the Details panel that contains the description for each example layout.
79         var detailsPanel = {
80                 id: 'details-panel',
81         title: 'Details',
82         region: 'center',
83         bodyStyle: 'padding-bottom:15px;background:#eee;',
84                 autoScroll: true,
85                 html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
86     };
87         
88         // Finally, build the main layout once all the pieces are ready.  This is also a good
89         // example of putting together a full-screen BorderLayout within a Viewport.
90     new Ext.Viewport({
91                 layout: 'border',
92                 title: 'Ext Layout Browser',
93                 items: [{
94                         xtype: 'box',
95                         region: 'north',
96                         applyTo: 'header',
97                         height: 30
98                 },{
99                         layout: 'border',
100                 id: 'layout-browser',
101                 region:'west',
102                 border: false,
103                 split:true,
104                         margins: '2 0 5 5',
105                 width: 275,
106                 minSize: 100,
107                 maxSize: 500,
108                         items: [treePanel, detailsPanel]
109                 },
110                         contentPanel
111                 ],
112         renderTo: Ext.getBody()
113     });
114 });
115 </pre>    \r
116 </body>\r
117 </html>