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