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="../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-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>