examples/layout-browser/layout-browser.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 //\r
  10 // This is the main layout definition.\r
  11 //\r
  12 Ext.onReady(function(){\r
  13         \r
  14         Ext.QuickTips.init();\r
  15         \r
  16         // This is an inner body element within the Details panel created to provide a "slide in" effect\r
  17         // on the panel body without affecting the body's box itself.  This element is created on\r
  18         // initial use and cached in this var for subsequent access.\r
  19         var detailEl;\r
  20         \r
  21         // This is the main content center region that will contain each example layout panel.\r
  22         // It will be implemented as a CardLayout since it will contain multiple panels with\r
  23         // only one being visible at any given time.\r
  24         var contentPanel = {\r
  25                 id: 'content-panel',\r
  26                 region: 'center', // this is what makes this panel into a region within the containing layout\r
  27                 layout: 'card',\r
  28                 margins: '2 5 5 0',\r
  29                 activeItem: 0,\r
  30                 border: false,\r
  31                 items: [\r
  32                         // from basic.js:\r
  33                         start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table,\r
  34                         // from custom.js:\r
  35                         rowLayout, centerLayout,\r
  36                         // from combination.js:\r
  37                         absoluteForm, tabsNestedLayouts\r
  38                 ]\r
  39         };\r
  40     \r
  41         // Go ahead and create the TreePanel now so that we can use it below\r
  42     var treePanel = new Ext.tree.TreePanel({\r
  43         id: 'tree-panel',\r
  44         title: 'Sample Layouts',\r
  45         region:'north',\r
  46         split: true,\r
  47         height: 300,\r
  48         minSize: 150,\r
  49         autoScroll: true,\r
  50         \r
  51         // tree-specific configs:\r
  52         rootVisible: false,\r
  53         lines: false,\r
  54         singleExpand: true,\r
  55         useArrows: true,\r
  56         \r
  57         loader: new Ext.tree.TreeLoader({\r
  58             dataUrl:'tree-data.json'\r
  59         }),\r
  60         \r
  61         root: new Ext.tree.AsyncTreeNode()\r
  62     });\r
  63     \r
  64         // Assign the changeLayout function to be called on tree node click.\r
  65     treePanel.on('click', function(n){\r
  66         var sn = this.selModel.selNode || {}; // selNode is null on initial selection\r
  67         if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node \r
  68                 Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');\r
  69                 if(!detailEl){\r
  70                         var bd = Ext.getCmp('details-panel').body;\r
  71                         bd.update('').setStyle('background','#fff');\r
  72                         detailEl = bd.createChild(); //create default empty div\r
  73                 }\r
  74                 detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});\r
  75         }\r
  76     });\r
  77     \r
  78         // This is the Details panel that contains the description for each example layout.\r
  79         var detailsPanel = {\r
  80                 id: 'details-panel',\r
  81         title: 'Details',\r
  82         region: 'center',\r
  83         bodyStyle: 'padding-bottom:15px;background:#eee;',\r
  84                 autoScroll: true,\r
  85                 html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'\r
  86     };\r
  87         \r
  88         // Finally, build the main layout once all the pieces are ready.  This is also a good\r
  89         // example of putting together a full-screen BorderLayout within a Viewport.\r
  90     new Ext.Viewport({\r
  91                 layout: 'border',\r
  92                 title: 'Ext Layout Browser',\r
  93                 items: [{\r
  94                         xtype: 'box',\r
  95                         region: 'north',\r
  96                         applyTo: 'header',\r
  97                         height: 30\r
  98                 },{\r
  99                         layout: 'border',\r
 100                 id: 'layout-browser',\r
 101                 region:'west',\r
 102                 border: false,\r
 103                 split:true,\r
 104                         margins: '2 0 5 5',\r
 105                 width: 275,\r
 106                 minSize: 100,\r
 107                 maxSize: 500,\r
 108                         items: [treePanel, detailsPanel]\r
 109                 },\r
 110                         contentPanel\r
 111                 ],\r
 112         renderTo: Ext.getBody()\r
 113     });\r
 114 });\r