examples/layout-browser/layouts/custom.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 // We are adding these custom layouts to a namespace that does not\r
  11 // exist by default in Ext, so we have to add the namespace first:\r
  12 Ext.ns('Ext.ux.layout');\r
  13 \r
  14 /*\r
  15  * ================  CenterLayout  =======================\r
  16  */\r
  17 /**\r
  18  * @class Ext.ux.layout.CenterLayout\r
  19  * @extends Ext.layout.FitLayout\r
  20  * <p>This is a very simple layout style used to center contents within a container.  This layout works within\r
  21  * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>\r
  22  * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses \r
  23  * the layout.  The layout does not require any config options, although the child panel contained within the\r
  24  * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by\r
  25  * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.  \r
  26  * Example usage:</p> \r
  27  * <pre><code>\r
  28 // The content panel is centered in the container\r
  29 var p = new Ext.Panel({\r
  30     title: 'Center Layout',\r
  31     layout: 'ux.center',\r
  32     items: [{\r
  33         title: 'Centered Content',\r
  34         width: '75%',\r
  35         html: 'Some content'\r
  36     }]\r
  37 });\r
  38 \r
  39 // If you leave the title blank and specify no border\r
  40 // you'll create a non-visual, structural panel just\r
  41 // for centering the contents in the main container.\r
  42 var p = new Ext.Panel({\r
  43     layout: 'ux.center',\r
  44     border: false,\r
  45     items: [{\r
  46         title: 'Centered Content',\r
  47         width: 300,\r
  48         autoHeight: true,\r
  49         html: 'Some content'\r
  50     }]\r
  51 });\r
  52 </code></pre>\r
  53  */\r
  54 Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {\r
  55         // private\r
  56     setItemSize : function(item, size){\r
  57         this.container.addClass('ux-layout-center');\r
  58         item.addClass('ux-layout-center-item');\r
  59         if(item && size.height > 0){\r
  60             if(item.width){\r
  61                 size.width = item.width;\r
  62             }\r
  63             item.setSize(size);\r
  64         }\r
  65     }\r
  66 });\r
  67 Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;\r
  68 \r
  69 /*\r
  70  * CenterLayout demo panel\r
  71  */\r
  72 var centerLayout = {\r
  73         id: 'center-panel',\r
  74     layout:'ux.center',\r
  75     items: {\r
  76         title: 'Centered Panel: 75% of container width and fit height',\r
  77         layout: 'ux.center',\r
  78         autoScroll: true,\r
  79         width: '75%',\r
  80         bodyStyle: 'padding:20px 0;',\r
  81         items: [{\r
  82                 title: 'Inner Centered Panel',\r
  83                 html: 'Fixed 300px wide and auto height. The container panel will also autoscroll if narrower than 300px.',\r
  84                 width: 300,\r
  85                 frame: true,\r
  86                 autoHeight: true,\r
  87                 bodyStyle: 'padding:10px 20px;'\r
  88         }]\r
  89     }\r
  90 };\r
  91 \r
  92 /*\r
  93  * ================  RowLayout  =======================\r
  94  */\r
  95 /**\r
  96  * @class Ext.ux.layout.RowLayout\r
  97  * @extends Ext.layout.ContainerLayout\r
  98  * <p>This is the layout style of choice for creating structural layouts in a multi-row format where the height of\r
  99  * each row can be specified as a percentage or fixed height.  Row widths can also be fixed, percentage or auto.\r
 100  * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,\r
 101  * and should generally not need to be created directly via the new keyword.</p>\r
 102  * <p>RowLayout does not have any direct config options (other than inherited ones), but it does support a\r
 103  * specific config property of <b><tt>rowHeight</tt></b> that can be included in the config of any panel added to it.  The\r
 104  * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.\r
 105  * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).</p>\r
 106  * <p>The height property is always evaluated as pixels, and must be a number greater than or equal to 1.\r
 107  * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and\r
 108  * less than 1 (e.g., .25).</p>\r
 109  * <p>The basic rules for specifying row heights are pretty simple.  The logic makes two passes through the\r
 110  * set of contained panels.  During the first layout pass, all panels that either have a fixed height or none\r
 111  * specified (auto) are skipped, but their heights are subtracted from the overall container height.  During the second\r
 112  * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on\r
 113  * the total <b>remaining</b> container height.  In other words, percentage height panels are designed to fill the space\r
 114  * left over by all the fixed-height and/or auto-height panels.  Because of this, while you can specify any number of rows\r
 115  * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your\r
 116  * layout may not render as expected.  Example usage:</p>\r
 117  * <pre><code>\r
 118 // All rows are percentages -- they must add up to 1\r
 119 var p = new Ext.Panel({\r
 120     title: 'Row Layout - Percentage Only',\r
 121     layout:'ux.row',\r
 122     items: [{\r
 123         title: 'Row 1',\r
 124         rowHeight: .25 \r
 125     },{\r
 126         title: 'Row 2',\r
 127         rowHeight: .6\r
 128     },{\r
 129         title: 'Row 3',\r
 130         rowHeight: .15\r
 131     }]\r
 132 });\r
 133 \r
 134 // Mix of height and rowHeight -- all rowHeight values must add\r
 135 // up to 1. The first row will take up exactly 120px, and the last two\r
 136 // rows will fill the remaining container height.\r
 137 var p = new Ext.Panel({\r
 138     title: 'Row Layout - Mixed',\r
 139     layout:'ux.row',\r
 140     items: [{\r
 141         title: 'Row 1',\r
 142         height: 120,\r
 143         // standard panel widths are still supported too:\r
 144         width: '50%' // or 200\r
 145     },{\r
 146         title: 'Row 2',\r
 147         rowHeight: .8,\r
 148         width: 300\r
 149     },{\r
 150         title: 'Row 3',\r
 151         rowHeight: .2\r
 152     }]\r
 153 });\r
 154 </code></pre>\r
 155  */\r
 156 Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {\r
 157     // private\r
 158     monitorResize:true,\r
 159 \r
 160     // private\r
 161     isValidParent : function(c, target){\r
 162         return c.getEl().dom.parentNode == this.innerCt.dom;\r
 163     },\r
 164 \r
 165     // private\r
 166     onLayout : function(ct, target){\r
 167         var rs = ct.items.items, len = rs.length, r, i;\r
 168 \r
 169         if(!this.innerCt){\r
 170             target.addClass('ux-row-layout-ct');\r
 171             this.innerCt = target.createChild({cls:'x-row-inner'});\r
 172         }\r
 173         this.renderAll(ct, this.innerCt);\r
 174 \r
 175         var size = target.getViewSize();\r
 176 \r
 177         if(size.width < 1 && size.height < 1){ // display none?\r
 178             return;\r
 179         }\r
 180 \r
 181         var h = size.height - target.getPadding('tb'),\r
 182             ph = h;\r
 183 \r
 184         this.innerCt.setSize({height:h});\r
 185         \r
 186         // some rows can be percentages while others are fixed\r
 187         // so we need to make 2 passes\r
 188         \r
 189         for(i = 0; i < len; i++){\r
 190             r = rs[i];\r
 191             if(!r.rowHeight){\r
 192                 ph -= (r.getSize().height + r.getEl().getMargins('tb'));\r
 193             }\r
 194         }\r
 195 \r
 196         ph = ph < 0 ? 0 : ph;\r
 197 \r
 198         for(i = 0; i < len; i++){\r
 199             r = rs[i];\r
 200             if(r.rowHeight){\r
 201                 r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')});\r
 202             }\r
 203         }\r
 204     }\r
 205     \r
 206     /**\r
 207      * @property activeItem\r
 208      * @hide\r
 209      */\r
 210 });\r
 211 Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;\r
 212 \r
 213 /*\r
 214  * RowLayout demo panel\r
 215  */\r
 216 var rowLayout = {\r
 217         id: 'row-panel',\r
 218         bodyStyle: 'padding:5px',\r
 219         layout: 'ux.row',\r
 220     title: 'Row Layout',\r
 221     items: [{\r
 222         title: 'Height = 25%, Width = 50%',\r
 223         rowHeight: .25,\r
 224         width: '50%'\r
 225     },{\r
 226         title: 'Height = 100px, Width = 300px',\r
 227         height: 100,\r
 228         width: 300\r
 229     },{\r
 230         title: 'Height = 75%, Width = fit',\r
 231         rowHeight: .75\r
 232     }]\r
 233 };\r
 234 \r