X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/layout-browser/layout-browser.js?ds=sidebyside

diff --git a/examples/layout-browser/layout-browser.js b/examples/layout-browser/layout-browser.js
index 61cc3d0f..79debb5a 100644
--- a/examples/layout-browser/layout-browser.js
+++ b/examples/layout-browser/layout-browser.js
@@ -1,113 +1,132 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux', '../ux');
+
+Ext.require([
+    'Ext.tip.QuickTipManager',
+    'Ext.container.Viewport',
+    'Ext.layout.*',
+    'Ext.form.Panel',
+    'Ext.form.Label',
+    'Ext.grid.*',
+    'Ext.data.*',
+    'Ext.tree.*',
+    'Ext.selection.*',
+    'Ext.tab.Panel',
+    'Ext.ux.layout.Center'  
+]);
 
 //
 // 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
-		]
-	};
+ 
+    Ext.tip.QuickTipManager.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;
+    
+    // Gets all layouts examples
+    var layoutExamples = [];
+    Ext.Object.each(getBasicLayouts(), function(name, example) {
+        layoutExamples.push(example);
+    });
+    
+    Ext.Object.each(getCombinationLayouts(), function(name, example){
+        layoutExamples.push(example);
+    });
+    
+    Ext.Object.each(getCustomLayouts(), function(name, example){
+        layoutExamples.push(example);
+    });
+    
+    // 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: layoutExamples
+    };
+     
+    var store = Ext.create('Ext.data.TreeStore', {
+        root: {
+            expanded: true
+        },
+        proxy: {
+            type: 'ajax',
+            url: 'tree-data.json'
+        }
+    });
     
-	// 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',
+    // Go ahead and create the TreePanel now so that we can use it below
+     var treePanel = Ext.create('Ext.tree.Panel', {
+        id: 'tree-panel',
+        title: 'Sample Layouts',
         region:'north',
         split: true,
-        height: 300,
+        height: 360,
         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()
+        autoScroll: true,
+        store: store
     });
     
-	// 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});
-    	}
+    // Assign the changeLayout function to be called on tree node click.
+    treePanel.getSelectionModel().on('select', function(selModel, record) {
+        if (record.get('leaf')) {
+            Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-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(record.getId() + '-details').innerHTML).slideIn('l', {stopAnimation:true,duration: 200});
+        }
     });
     
-	// This is the Details panel that contains the description for each example layout.
-	var detailsPanel = {
-		id: 'details-panel',
+    // 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: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
+        autoScroll: true,
+        html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
     };
-	
-	// 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
-		],
+ 
+    // 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.
+    Ext.create('Ext.Viewport', {
+        layout: 'border',
+        title: 'Ext Layout Browser',
+        items: [{
+            xtype: 'box',
+            id: 'header',
+            region: 'north',
+            html: '<h1> Ext.Layout.Browser</h1>',
+            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()
     });
 });