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