3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
9 // This is the main layout definition.
11 Ext.onReady(function(){
15 // This is an inner body element within the Details panel created to provide a "slide in" effect
16 // on the panel body without affecting the body's box itself. This element is created on
17 // initial use and cached in this var for subsequent access.
20 // This is the main content center region that will contain each example layout panel.
21 // It will be implemented as a CardLayout since it will contain multiple panels with
22 // only one being visible at any given time.
25 region: 'center', // this is what makes this panel into a region within the containing layout
32 start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
34 rowLayout, centerLayout,
35 // from combination.js:
36 absoluteForm, tabsNestedLayouts
40 // Go ahead and create the TreePanel now so that we can use it below
41 var treePanel = new Ext.tree.TreePanel({
43 title: 'Sample Layouts',
50 // tree-specific configs:
56 loader: new Ext.tree.TreeLoader({
57 dataUrl:'tree-data.json'
60 root: new Ext.tree.AsyncTreeNode()
63 // Assign the changeLayout function to be called on tree node click.
64 treePanel.on('click', function(n){
65 var sn = this.selModel.selNode || {}; // selNode is null on initial selection
66 if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
67 Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
69 var bd = Ext.getCmp('details-panel').body;
70 bd.update('').setStyle('background','#fff');
71 detailEl = bd.createChild(); //create default empty div
73 detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
77 // This is the Details panel that contains the description for each example layout.
82 bodyStyle: 'padding-bottom:15px;background:#eee;',
84 html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
87 // Finally, build the main layout once all the pieces are ready. This is also a good
88 // example of putting together a full-screen BorderLayout within a Viewport.
91 title: 'Ext Layout Browser',
107 items: [treePanel, detailsPanel]
111 renderTo: Ext.getBody()