Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / CheckboxGroup2.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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/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-layout-container-CheckboxGroup'>/**
19 </span> * @class Ext.layout.container.CheckboxGroup
20  * @extends Ext.layout.container.Container
21  * &lt;p&gt;This layout implements the column arrangement for {@link Ext.form.CheckboxGroup} and {@link Ext.form.RadioGroup}.
22  * It groups the component's sub-items into columns based on the component's
23  * {@link Ext.form.CheckboxGroup#columns columns} and {@link Ext.form.CheckboxGroup#vertical} config properties.&lt;/p&gt;
24  *
25  */
26 Ext.define('Ext.layout.container.CheckboxGroup', {
27     extend: 'Ext.layout.container.Container',
28     alias: ['layout.checkboxgroup'],
29
30
31     onLayout: function() {
32         var numCols = this.getColCount(),
33             shadowCt = this.getShadowCt(),
34             owner = this.owner,
35             items = owner.items,
36             shadowItems = shadowCt.items,
37             numItems = items.length,
38             colIndex = 0,
39             i, numRows;
40
41         // Distribute the items into the appropriate column containers. We add directly to the
42         // containers' items collection rather than calling container.add(), because we need the
43         // checkboxes to maintain their original ownerCt. The distribution is done on each layout
44         // in case items have been added, removed, or reordered.
45
46         shadowItems.each(function(col) {
47             col.items.clear();
48         });
49
50         // If columns=&quot;auto&quot;, then the number of required columns may change as checkboxes are added/removed
51         // from the CheckboxGroup; adjust to match.
52         while (shadowItems.length &gt; numCols) {
53             shadowCt.remove(shadowItems.last());
54         }
55         while (shadowItems.length &lt; numCols) {
56             shadowCt.add({
57                 xtype: 'container',
58                 cls: owner.groupCls,
59                 flex: 1
60             });
61         }
62
63         if (owner.vertical) {
64             numRows = Math.ceil(numItems / numCols);
65             for (i = 0; i &lt; numItems; i++) {
66                 if (i &gt; 0 &amp;&amp; i % numRows === 0) {
67                     colIndex++;
68                 }
69                 shadowItems.getAt(colIndex).items.add(items.getAt(i));
70             }
71         } else {
72             for (i = 0; i &lt; numItems; i++) {
73                 colIndex = i % numCols;
74                 shadowItems.getAt(colIndex).items.add(items.getAt(i));
75             }
76         }
77
78         if (!shadowCt.rendered) {
79             shadowCt.render(this.getRenderTarget());
80         } else {
81             // Ensure all items are rendered in the correct place in the correct column - this won't
82             // get done by the column containers themselves if their dimensions are not changing.
83             shadowItems.each(function(col) {
84                 var layout = col.getLayout();
85                 layout.renderItems(layout.getLayoutItems(), layout.getRenderTarget());
86             });
87         }
88
89         shadowCt.doComponentLayout();
90     },
91
92
93     // We don't want to render any items to the owner directly, that gets handled by each column's own layout
94     renderItems: Ext.emptyFn,
95
96
97 <span id='Ext-layout-container-CheckboxGroup-method-getShadowCt'>    /**
98 </span>     * @private
99      * Creates and returns the shadow hbox container that will be used to arrange the owner's items
100      * into columns.
101      */
102     getShadowCt: function() {
103         var me = this,
104             shadowCt = me.shadowCt,
105             owner, items, item, columns, columnsIsArray, numCols, i;
106
107         if (!shadowCt) {
108             // Create the column containers based on the owner's 'columns' config
109             owner = me.owner;
110             columns = owner.columns;
111             columnsIsArray = Ext.isArray(columns);
112             numCols = me.getColCount();
113             items = [];
114             for(i = 0; i &lt; numCols; i++) {
115                 item = {
116                     xtype: 'container',
117                     cls: owner.groupCls
118                 };
119                 if (columnsIsArray) {
120                     // Array can contain mixture of whole numbers, used as fixed pixel widths, and fractional
121                     // numbers, used as relative flex values.
122                     if (columns[i] &lt; 1) {
123                         item.flex = columns[i];
124                     } else {
125                         item.width = columns[i];
126                     }
127                 }
128                 else {
129                     // All columns the same width
130                     item.flex = 1;
131                 }
132                 items.push(item);
133             }
134
135             // Create the shadow container; delay rendering until after items are added to the columns
136             shadowCt = me.shadowCt = Ext.createWidget('container', {
137                 layout: 'hbox',
138                 items: items,
139                 ownerCt: owner
140             });
141         }
142         
143         return shadowCt;
144     },
145
146
147 <span id='Ext-layout-container-CheckboxGroup-method-getColCount'>    /**
148 </span>     * @private Get the number of columns in the checkbox group
149      */
150     getColCount: function() {
151         var owner = this.owner,
152             colsCfg = owner.columns;
153         return Ext.isArray(colsCfg) ? colsCfg.length : (Ext.isNumber(colsCfg) ? colsCfg : owner.items.length);
154     }
155
156 });
157 </pre>
158 </body>
159 </html>