docs/source/ColumnLayout.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-grid-ColumnLayout'>/**
  19 </span> * @class Ext.grid.ColumnLayout
  20  * @extends Ext.layout.container.HBox
  21  * @private
  22  *
  23  * &lt;p&gt;This class is used only by the grid's HeaderContainer docked child.&lt;/p&gt;
  24  *
  25  * &lt;p&gt;This class adds the ability to shrink the vertical size of the inner container element back if a grouped
  26  * column header has all its child columns dragged out, and the whole HeaderContainer needs to shrink back down.&lt;/p&gt;
  27  *
  28  * &lt;p&gt;It also enforces the grid's HeaderContainer's forceFit config by, after every calaculateChildBoxes call, converting
  29  * all pixel widths into flex values, so that propertions are maintained upon width change of the grid.&lt;/p&gt;
  30  *
  31  * &lt;p&gt;Also, after every layout, after all headers have attained their 'stretchmax' height, it goes through and calls
  32  * &lt;code&gt;setPadding&lt;/code&gt; on the columns so that they lay out correctly. TODO: implement a ColumnHeader component
  33  * layout which takes responsibility for this, and will run upon resize.&lt;/p&gt;
  34  */
  35 Ext.define('Ext.grid.ColumnLayout', {
  36     extend: 'Ext.layout.container.HBox',
  37     alias: 'layout.gridcolumn',
  38     type : 'column',
  39
  40     // Height-stretched innerCt must be able to revert back to unstretched height
  41     clearInnerCtOnLayout: false,
  42
  43     constructor: function() {
  44         var me = this;
  45         me.callParent(arguments);
  46         if (!Ext.isDefined(me.availableSpaceOffset)) {
  47             me.availableSpaceOffset = (Ext.getScrollBarWidth() - 2);
  48         }
  49     },
  50
  51     beforeLayout: function() {
  52         var me = this,
  53             i = 0,
  54             items = me.getLayoutItems(),
  55             len = items.length,
  56             item, returnValue;
  57
  58         returnValue = me.callParent(arguments);
  59
  60         // Size to a sane minimum height before possibly being stretched to accommodate grouped headers
  61         me.innerCt.setHeight(23);
  62
  63         // Unstretch child items before the layout which stretches them.
  64         if (me.align == 'stretchmax') {
  65             for (; i &lt; len; i++) {
  66                 item = items[i];
  67                 item.el.setStyle({
  68                     height: 'auto'
  69                 });
  70                 item.titleContainer.setStyle({
  71                     height: 'auto',
  72                     paddingTop: '0'
  73                 });
  74                 if (item.componentLayout &amp;&amp; item.componentLayout.lastComponentSize) {
  75                     item.componentLayout.lastComponentSize.height = item.el.dom.offsetHeight;
  76                 }
  77             }
  78         }
  79         return returnValue;
  80     },
  81
  82     // Override to enforce the forceFit config.
  83     calculateChildBoxes: function(visibleItems, targetSize) {
  84         var me = this,
  85             calculations = me.callParent(arguments),
  86             boxes = calculations.boxes,
  87             metaData = calculations.meta,
  88             len = boxes.length, i = 0, box, item;
  89
  90         if (targetSize.width &amp;&amp; !me.isColumn) {
  91             // If configured forceFit then all columns will be flexed
  92             if (me.owner.forceFit) {
  93
  94                 for (; i &lt; len; i++) {
  95                     box = boxes[i];
  96                     item = box.component;
  97
  98                     // Set a sane minWidth for the Box layout to be able to squeeze flexed Headers down to.
  99                     item.minWidth = Ext.grid.plugin.HeaderResizer.prototype.minColWidth;
 100
 101                     // For forceFit, just use allocated width as the flex value, and the proportions
 102                     // will end up the same whatever HeaderContainer width they are being forced into.
 103                     item.flex = box.width;
 104                 }
 105
 106                 // Recalculate based upon all columns now being flexed instead of sized.
 107                 calculations = me.callParent(arguments);
 108             }
 109             else if (metaData.tooNarrow) {
 110                 targetSize.width = metaData.desiredSize;
 111             }
 112         }
 113
 114         return calculations;
 115     },
 116
 117     afterLayout: function() {
 118         var me = this,
 119             i = 0,
 120             items = me.getLayoutItems(),
 121             len = items.length;
 122
 123         me.callParent(arguments);
 124
 125         // Set up padding in items
 126         if (me.align == 'stretchmax') {
 127             for (; i &lt; len; i++) {
 128                 items[i].setPadding();
 129             }
 130         }
 131     },
 132
 133     // FIX: when flexing we actually don't have enough space as we would
 134     // typically because of the scrollOffset on the GridView, must reserve this
 135     updateInnerCtSize: function(tSize, calcs) {
 136         var me    = this,
 137             extra = 0;
 138
 139         // Columns must not account for scroll offset
 140         if (!me.isColumn &amp;&amp; calcs.meta.tooNarrow) {
 141             if (
 142                 Ext.isWebKit ||
 143                 Ext.isGecko ||
 144                 (Ext.isIEQuirks &amp;&amp; (Ext.isIE6 || Ext.isIE7 || Ext.isIE8))
 145             ) {
 146                 extra = 1;
 147             // IE6-8 not quirks
 148             } else if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8) {
 149                 extra = 2;
 150             }
 151
 152             // this is the 1px accounted for in the Scroller when subtracting 1px.
 153             extra++;
 154             tSize.width = calcs.meta.desiredSize + (me.reserveOffset ? me.availableSpaceOffset : 0) + extra;
 155         }
 156         return me.callParent(arguments);
 157     },
 158
 159     doOwnerCtLayouts: function() {
 160         var ownerCt = this.owner.ownerCt;
 161         if (!ownerCt.componentLayout.layoutBusy) {
 162             ownerCt.doComponentLayout();
 163         }
 164     }
 165 });</pre>
 166 </body>
 167 </html>