The source code

    //
    // 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()
        });
    });