Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / layout-browser / layout-browser.js
index d2f8d21..61cc3d0 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 JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+
+//
+// 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: '<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
+               ],
+        renderTo: Ext.getBody()
+    });
+});