When you select a layout from the tree, additional details will display here.
' - }; - - // Finally, build the main layout once all the pieces are ready. This is also a good - // example of putting together a full-screen BorderLayout within a Viewport. - new Ext.Viewport({ - layout: 'border', - title: 'Ext Layout Browser', - items: [{ - xtype: 'box', - region: 'north', - applyTo: 'header', - height: 30 - },{ - layout: 'border', - id: 'layout-browser', - region:'west', - border: false, - split:true, - margins: '2 0 5 5', - width: 275, - minSize: 100, - maxSize: 500, - items: [treePanel, detailsPanel] - }, - contentPanel - ], - renderTo: Ext.getBody() - }); -}); +/*! + * Ext JS Library 3.1.1 + * Copyright(c) 2006-2010 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ + +// +// This is the main layout definition. +// +Ext.onReady(function(){ + + Ext.QuickTips.init(); + + // This is an inner body element within the Details panel created to provide a "slide in" effect + // on the panel body without affecting the body's box itself. This element is created on + // initial use and cached in this var for subsequent access. + var detailEl; + + // This is the main content center region that will contain each example layout panel. + // It will be implemented as a CardLayout since it will contain multiple panels with + // only one being visible at any given time. + var contentPanel = { + id: 'content-panel', + region: 'center', // this is what makes this panel into a region within the containing layout + layout: 'card', + margins: '2 5 5 0', + activeItem: 0, + border: false, + items: [ + // from basic.js: + start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox, + // from custom.js: + rowLayout, centerLayout, + // from combination.js: + absoluteForm, tabsNestedLayouts + ] + }; + + // Go ahead and create the TreePanel now so that we can use it below + var treePanel = new Ext.tree.TreePanel({ + id: 'tree-panel', + title: 'Sample Layouts', + region:'north', + split: true, + height: 300, + minSize: 150, + autoScroll: true, + + // tree-specific configs: + rootVisible: false, + lines: false, + singleExpand: true, + useArrows: true, + + loader: new Ext.tree.TreeLoader({ + dataUrl:'tree-data.json' + }), + + root: new Ext.tree.AsyncTreeNode() + }); + + // Assign the changeLayout function to be called on tree node click. + treePanel.on('click', function(n){ + var sn = this.selModel.selNode || {}; // selNode is null on initial selection + if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node + Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel'); + if(!detailEl){ + var bd = Ext.getCmp('details-panel').body; + bd.update('').setStyle('background','#fff'); + detailEl = bd.createChild(); //create default empty div + } + detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2}); + } + }); + + // This is the Details panel that contains the description for each example layout. + var detailsPanel = { + id: 'details-panel', + title: 'Details', + region: 'center', + bodyStyle: 'padding-bottom:15px;background:#eee;', + autoScroll: true, + html: 'When you select a layout from the tree, additional details will display here.
' + }; + + // Finally, build the main layout once all the pieces are ready. This is also a good + // example of putting together a full-screen BorderLayout within a Viewport. + new Ext.Viewport({ + layout: 'border', + title: 'Ext Layout Browser', + items: [{ + xtype: 'box', + region: 'north', + applyTo: 'header', + height: 30 + },{ + layout: 'border', + id: 'layout-browser', + region:'west', + border: false, + split:true, + margins: '2 0 5 5', + width: 275, + minSize: 100, + maxSize: 500, + items: [treePanel, detailsPanel] + }, + contentPanel + ], + renderTo: Ext.getBody() + }); +});