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
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js">
10 // This is the main layout definition.
12 Ext.onReady(function(){
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.
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.
26 region: 'center', // this is what makes this panel into a region within the containing layout
33 start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
35 rowLayout, centerLayout,
36 // from combination.js:
37 absoluteForm, tabsNestedLayouts
41 // Go ahead and create the TreePanel now so that we can use it below
42 var treePanel = new Ext.tree.TreePanel({
44 title: 'Sample Layouts',
51 // tree-specific configs:
57 loader: new Ext.tree.TreeLoader({
58 dataUrl:'tree-data.json'
61 root: new Ext.tree.AsyncTreeNode()
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');
70 var bd = Ext.getCmp('details-panel').body;
71 bd.update('').setStyle('background','#fff');
72 detailEl = bd.createChild(); //create default empty div
74 detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
78 // This is the Details panel that contains the description for each example layout.
83 bodyStyle: 'padding-bottom:15px;background:#eee;',
85 html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
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.
92 title: 'Ext Layout Browser',
100 id: 'layout-browser',
108 items: [treePanel, detailsPanel]
112 renderTo: Ext.getBody()