Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / 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     reserveOffset: false,
41
42     // Height-stretched innerCt must be able to revert back to unstretched height
43     clearInnerCtOnLayout: false,
44
45     beforeLayout: function() {
46         var me = this,
47             i = 0,
48             items = me.getLayoutItems(),
49             len = items.length,
50             item, returnValue,
51             s;
52
53         // Scrollbar offset defined by width of any vertical scroller in the owning grid
54         if (!Ext.isDefined(me.availableSpaceOffset)) {
55             s = me.owner.up('tablepanel').verticalScroller;
56             me.availableSpaceOffset = s ? s.width-1 : 0;
57         }
58
59         returnValue = me.callParent(arguments);
60
61         // Size to a sane minimum height before possibly being stretched to accommodate grouped headers
62         me.innerCt.setHeight(23);
63
64         // Unstretch child items before the layout which stretches them.
65         if (me.align == 'stretchmax') {
66             for (; i &lt; len; i++) {
67                 item = items[i];
68                 item.el.setStyle({
69                     height: 'auto'
70                 });
71                 item.titleContainer.setStyle({
72                     height: 'auto',
73                     paddingTop: '0'
74                 });
75                 if (item.componentLayout &amp;&amp; item.componentLayout.lastComponentSize) {
76                     item.componentLayout.lastComponentSize.height = item.el.dom.offsetHeight;
77                 }
78             }
79         }
80         return returnValue;
81     },
82
83     // Override to enforce the forceFit config.
84     calculateChildBoxes: function(visibleItems, targetSize) {
85         var me = this,
86             calculations = me.callParent(arguments),
87             boxes = calculations.boxes,
88             metaData = calculations.meta,
89             len = boxes.length, i = 0, box, item;
90
91         if (targetSize.width &amp;&amp; !me.isColumn) {
92             // If configured forceFit then all columns will be flexed
93             if (me.owner.forceFit) {
94
95                 for (; i &lt; len; i++) {
96                     box = boxes[i];
97                     item = box.component;
98
99                     // Set a sane minWidth for the Box layout to be able to squeeze flexed Headers down to.
100                     item.minWidth = Ext.grid.plugin.HeaderResizer.prototype.minColWidth;
101
102                     // For forceFit, just use allocated width as the flex value, and the proportions
103                     // will end up the same whatever HeaderContainer width they are being forced into.
104                     item.flex = box.width;
105                 }
106
107                 // Recalculate based upon all columns now being flexed instead of sized.
108                 calculations = me.callParent(arguments);
109             }
110             else if (metaData.tooNarrow) {
111                 targetSize.width = metaData.desiredSize;
112             }
113         }
114
115         return calculations;
116     },
117
118     afterLayout: function() {
119         var me = this,
120             i = 0,
121             items = me.getLayoutItems(),
122             len = items.length;
123
124         me.callParent(arguments);
125
126         // Set up padding in items
127         if (!me.owner.hideHeaders &amp;&amp; me.align == 'stretchmax') {
128             for (; i &lt; len; i++) {
129                 items[i].setPadding();
130             }
131         }
132     },
133
134     // FIX: when flexing we actually don't have enough space as we would
135     // typically because of the scrollOffset on the GridView, must reserve this
136     updateInnerCtSize: function(tSize, calcs) {
137         var me = this,
138             extra;
139
140         // Columns must not account for scroll offset
141         if (!me.isColumn) {
142             me.tooNarrow = calcs.meta.tooNarrow;
143             extra = (me.reserveOffset ? me.availableSpaceOffset : 0);
144
145             if (calcs.meta.tooNarrow) {
146                 tSize.width = calcs.meta.desiredSize + extra;
147             } else {
148                 tSize.width += extra;
149             }
150         }
151
152         return me.callParent(arguments);
153     },
154
155     doOwnerCtLayouts: function() {
156         var ownerCt = this.owner.ownerCt;
157         if (!ownerCt.componentLayout.layoutBusy) {
158             ownerCt.doComponentLayout();
159         }
160     }
161 });</pre>
162 </body>
163 </html>