+//
+// 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()
+ });
+});
+
+
+
\ No newline at end of file