docs/source/CheckboxGroup.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.form.CheckboxGroup"></div>/**
  10  * @class Ext.form.CheckboxGroup
  11  * @extends Ext.form.Field
  12  * <p>A grouping container for {@link Ext.form.Checkbox} controls.</p>
  13  * <p>Sample usage:</p>
  14  * <pre><code>
  15 var myCheckboxGroup = new Ext.form.CheckboxGroup({
  16     id:'myGroup',
  17     xtype: 'checkboxgroup',
  18     fieldLabel: 'Single Column',
  19     itemCls: 'x-check-group-alt',
  20     // Put all controls in a single column with width 100%
  21     columns: 1,
  22     items: [
  23         {boxLabel: 'Item 1', name: 'cb-col-1'},
  24         {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
  25         {boxLabel: 'Item 3', name: 'cb-col-3'}
  26     ]
  27 });
  28  * </code></pre>
  29  * @constructor
  30  * Creates a new CheckboxGroup
  31  * @param {Object} config Configuration options
  32  * @xtype checkboxgroup
  33  */
  34 Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
  35     <div id="cfg-Ext.form.CheckboxGroup-items"></div>/**
  36      * @cfg {Array} items An Array of {@link Ext.form.Checkbox Checkbox}es or Checkbox config objects
  37      * to arrange in the group.
  38      */
  39     <div id="cfg-Ext.form.CheckboxGroup-columns"></div>/**
  40      * @cfg {String/Number/Array} columns Specifies the number of columns to use when displaying grouped
  41      * checkbox/radio controls using automatic layout.  This config can take several types of values:
  42      * <ul><li><b>'auto'</b> : <p class="sub-desc">The controls will be rendered one per column on one row and the width
  43      * of each column will be evenly distributed based on the width of the overall field container. This is the default.</p></li>
  44      * <li><b>Number</b> : <p class="sub-desc">If you specific a number (e.g., 3) that number of columns will be
  45      * created and the contained controls will be automatically distributed based on the value of {@link #vertical}.</p></li>
  46      * <li><b>Array</b> : Object<p class="sub-desc">You can also specify an array of column widths, mixing integer
  47      * (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will
  48      * be rendered first, then any float values will be calculated as a percentage of the remaining space. Float
  49      * values do not have to add up to 1 (100%) although if you want the controls to take up the entire field
  50      * container you should do so.</p></li></ul>
  51      */
  52     columns : 'auto',
  53     <div id="cfg-Ext.form.CheckboxGroup-vertical"></div>/**
  54      * @cfg {Boolean} vertical True to distribute contained controls across columns, completely filling each column
  55      * top to bottom before starting on the next column.  The number of controls in each column will be automatically
  56      * calculated to keep columns as even as possible.  The default value is false, so that controls will be added
  57      * to columns one at a time, completely filling each row left to right before starting on the next row.
  58      */
  59     vertical : false,
  60     <div id="cfg-Ext.form.CheckboxGroup-allowBlank"></div>/**
  61      * @cfg {Boolean} allowBlank False to validate that at least one item in the group is checked (defaults to true).
  62      * If no items are selected at validation time, {@link @blankText} will be used as the error text.
  63      */
  64     allowBlank : true,
  65     <div id="cfg-Ext.form.CheckboxGroup-blankText"></div>/**
  66      * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must
  67      * select at least one item in this group")
  68      */
  69     blankText : "You must select at least one item in this group",
  70
  71     // private
  72     defaultType : 'checkbox',
  73
  74     // private
  75     groupCls : 'x-form-check-group',
  76
  77     // private
  78     initComponent: function(){
  79         this.addEvents(
  80             <div id="event-Ext.form.CheckboxGroup-change"></div>/**
  81              * @event change
  82              * Fires when the state of a child checkbox changes.
  83              * @param {Ext.form.CheckboxGroup} this
  84              * @param {Array} checked An array containing the checked boxes.
  85              */
  86             'change'
  87         );
  88         this.on('change', this.validate, this);
  89         Ext.form.CheckboxGroup.superclass.initComponent.call(this);
  90     },
  91
  92     // private
  93     onRender : function(ct, position){
  94         if(!this.el){
  95             var panelCfg = {
  96                 autoEl: {
  97                     id: this.id
  98                 },
  99                 cls: this.groupCls,
 100                 layout: 'column',
 101                 renderTo: ct,
 102                 bufferResize: false // Default this to false, since it doesn't really have a proper ownerCt.
 103             };
 104             var colCfg = {
 105                 xtype: 'container',
 106                 defaultType: this.defaultType,
 107                 layout: 'form',
 108                 defaults: {
 109                     hideLabel: true,
 110                     anchor: '100%'
 111                 }
 112             };
 113
 114             if(this.items[0].items){
 115
 116                 // The container has standard ColumnLayout configs, so pass them in directly
 117
 118                 Ext.apply(panelCfg, {
 119                     layoutConfig: {columns: this.items.length},
 120                     defaults: this.defaults,
 121                     items: this.items
 122                 });
 123                 for(var i=0, len=this.items.length; i<len; i++){
 124                     Ext.applyIf(this.items[i], colCfg);
 125                 }
 126
 127             }else{
 128
 129                 // The container has field item configs, so we have to generate the column
 130                 // panels first then move the items into the columns as needed.
 131
 132                 var numCols, cols = [];
 133
 134                 if(typeof this.columns == 'string'){ // 'auto' so create a col per item
 135                     this.columns = this.items.length;
 136                 }
 137                 if(!Ext.isArray(this.columns)){
 138                     var cs = [];
 139                     for(var i=0; i<this.columns; i++){
 140                         cs.push((100/this.columns)*.01); // distribute by even %
 141                     }
 142                     this.columns = cs;
 143                 }
 144
 145                 numCols = this.columns.length;
 146
 147                 // Generate the column configs with the correct width setting
 148                 for(var i=0; i<numCols; i++){
 149                     var cc = Ext.apply({items:[]}, colCfg);
 150                     cc[this.columns[i] <= 1 ? 'columnWidth' : 'width'] = this.columns[i];
 151                     if(this.defaults){
 152                         cc.defaults = Ext.apply(cc.defaults || {}, this.defaults)
 153                     }
 154                     cols.push(cc);
 155                 };
 156
 157                 // Distribute the original items into the columns
 158                 if(this.vertical){
 159                     var rows = Math.ceil(this.items.length / numCols), ri = 0;
 160                     for(var i=0, len=this.items.length; i<len; i++){
 161                         if(i>0 && i%rows==0){
 162                             ri++;
 163                         }
 164                         if(this.items[i].fieldLabel){
 165                             this.items[i].hideLabel = false;
 166                         }
 167                         cols[ri].items.push(this.items[i]);
 168                     };
 169                 }else{
 170                     for(var i=0, len=this.items.length; i<len; i++){
 171                         var ci = i % numCols;
 172                         if(this.items[i].fieldLabel){
 173                             this.items[i].hideLabel = false;
 174                         }
 175                         cols[ci].items.push(this.items[i]);
 176                     };
 177                 }
 178
 179                 Ext.apply(panelCfg, {
 180                     layoutConfig: {columns: numCols},
 181                     items: cols
 182                 });
 183             }
 184
 185             this.panel = new Ext.Container(panelCfg);
 186             this.panel.ownerCt = this;
 187             this.el = this.panel.getEl();
 188
 189             if(this.forId && this.itemCls){
 190                 var l = this.el.up(this.itemCls).child('label', true);
 191                 if(l){
 192                     l.setAttribute('htmlFor', this.forId);
 193                 }
 194             }
 195
 196             var fields = this.panel.findBy(function(c){
 197                 return c.isFormField;
 198             }, this);
 199
 200             this.items = new Ext.util.MixedCollection();
 201             this.items.addAll(fields);
 202         }
 203         Ext.form.CheckboxGroup.superclass.onRender.call(this, ct, position);
 204     },
 205
 206     initValue : function(){
 207         if(this.value){
 208             this.setValue.apply(this, this.buffered ? this.value : [this.value]);
 209             delete this.buffered;
 210             delete this.value;
 211         }
 212     },
 213
 214     afterRender : function(){
 215         Ext.form.CheckboxGroup.superclass.afterRender.call(this);
 216         this.eachItem(function(item){
 217             item.on('check', this.fireChecked, this);
 218             item.inGroup = true;
 219         });
 220     },
 221
 222     // private
 223     doLayout: function(){
 224         //ugly method required to layout hidden items
 225         if(this.rendered){
 226             this.panel.forceLayout = this.ownerCt.forceLayout;
 227             this.panel.doLayout();
 228         }
 229     },
 230
 231     // private
 232     fireChecked: function(){
 233         var arr = [];
 234         this.eachItem(function(item){
 235             if(item.checked){
 236                 arr.push(item);
 237             }
 238         });
 239         this.fireEvent('change', this, arr);
 240     },
 241
 242     // private
 243     validateValue : function(value){
 244         if(!this.allowBlank){
 245             var blank = true;
 246             this.eachItem(function(f){
 247                 if(f.checked){
 248                     return (blank = false);
 249                 }
 250             });
 251             if(blank){
 252                 this.markInvalid(this.blankText);
 253                 return false;
 254             }
 255         }
 256         return true;
 257     },
 258
 259     // private
 260     isDirty: function(){
 261         //override the behaviour to check sub items.
 262         if (this.disabled || !this.rendered) {
 263             return false;
 264         }
 265
 266         var dirty = false;
 267         this.eachItem(function(item){
 268             if(item.isDirty()){
 269                 dirty = true;
 270                 return false;
 271             }
 272         });
 273         return dirty;
 274     },
 275
 276     // private
 277     onDisable : function(){
 278         this.eachItem(function(item){
 279             item.disable();
 280         });
 281     },
 282
 283     // private
 284     onEnable : function(){
 285         this.eachItem(function(item){
 286             item.enable();
 287         });
 288     },
 289
 290     // private
 291     doLayout: function(){
 292         if(this.rendered){
 293             this.panel.forceLayout = this.ownerCt.forceLayout;
 294             this.panel.doLayout();
 295         }
 296     },
 297
 298     // private
 299     onResize : function(w, h){
 300         this.panel.setSize(w, h);
 301         this.panel.doLayout();
 302     },
 303
 304     // inherit docs from Field
 305     reset : function(){
 306         this.eachItem(function(c){
 307             if(c.reset){
 308                 c.reset();
 309             }
 310         });
 311         // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete.
 312         // Important because reset is being called on both the group and the individual items.
 313         (function() {
 314             this.clearInvalid();
 315         }).defer(50, this);
 316     },
 317
 318     <div id="method-Ext.form.CheckboxGroup-setValue"></div>/**
 319      * {@link Ext.form.Checkbox#setValue Set the value(s)} of an item or items
 320      * in the group. Examples illustrating how this method may be called:
 321      * <pre><code>
 322 // call with name and value
 323 myCheckboxGroup.setValue('cb-col-1', true);
 324 // call with an array of boolean values
 325 myCheckboxGroup.setValue([true, false, false]);
 326 // call with an object literal specifying item:value pairs
 327 myCheckboxGroup.setValue({
 328     'cb-col-2': false,
 329     'cb-col-3': true
 330 });
 331 // use comma separated string to set items with name to true (checked)
 332 myCheckboxGroup.setValue('cb-col-1,cb-col-3');
 333      * </code></pre>
 334      * See {@link Ext.form.Checkbox#setValue} for additional information.
 335      * @param {Mixed} id The checkbox to check, or as described by example shown.
 336      * @param {Boolean} value (optional) The value to set the item.
 337      * @return {Ext.form.CheckboxGroup} this
 338      */
 339     setValue: function(){
 340         if(this.rendered){
 341             this.onSetValue.apply(this, arguments);
 342         }else{
 343             this.buffered = true;
 344             this.value = arguments;
 345         }
 346         return this;
 347     },
 348
 349     onSetValue: function(id, value){
 350         if(arguments.length == 1){
 351             if(Ext.isArray(id)){
 352                 // an array of boolean values
 353                 Ext.each(id, function(val, idx){
 354                     var item = this.items.itemAt(idx);
 355                     if(item){
 356                         item.setValue(val);
 357                     }
 358                 }, this);
 359             }else if(Ext.isObject(id)){
 360                 // set of name/value pairs
 361                 for(var i in id){
 362                     var f = this.getBox(i);
 363                     if(f){
 364                         f.setValue(id[i]);
 365                     }
 366                 }
 367             }else{
 368                 this.setValueForItem(id);
 369             }
 370         }else{
 371             var f = this.getBox(id);
 372             if(f){
 373                 f.setValue(value);
 374             }
 375         }
 376     },
 377
 378     // private
 379     beforeDestroy: function(){
 380         Ext.destroy(this.panel);
 381         Ext.form.CheckboxGroup.superclass.beforeDestroy.call(this);
 382
 383     },
 384
 385     setValueForItem : function(val){
 386         val = String(val).split(',');
 387         this.eachItem(function(item){
 388             if(val.indexOf(item.inputValue)> -1){
 389                 item.setValue(true);
 390             }
 391         });
 392     },
 393
 394     // private
 395     getBox : function(id){
 396         var box = null;
 397         this.eachItem(function(f){
 398             if(id == f || f.dataIndex == id || f.id == id || f.getName() == id){
 399                 box = f;
 400                 return false;
 401             }
 402         });
 403         return box;
 404     },
 405
 406     <div id="method-Ext.form.CheckboxGroup-getValue"></div>/**
 407      * Gets an array of the selected {@link Ext.form.Checkbox} in the group.
 408      * @return {Array} An array of the selected checkboxes.
 409      */
 410     getValue : function(){
 411         var out = [];
 412         this.eachItem(function(item){
 413             if(item.checked){
 414                 out.push(item);
 415             }
 416         });
 417         return out;
 418     },
 419
 420     // private
 421     eachItem: function(fn){
 422         if(this.items && this.items.each){
 423             this.items.each(fn, this);
 424         }
 425     },
 426
 427     <div id="cfg-Ext.form.CheckboxGroup-name"></div>/**
 428      * @cfg {String} name
 429      * @hide
 430      */
 431
 432     <div id="method-Ext.form.CheckboxGroup-getRawValue"></div>/**
 433      * @method getRawValue
 434      * @hide
 435      */
 436     getRawValue : Ext.emptyFn,
 437
 438     <div id="method-Ext.form.CheckboxGroup-setRawValue"></div>/**
 439      * @method setRawValue
 440      * @hide
 441      */
 442     setRawValue : Ext.emptyFn
 443
 444 });
 445
 446 Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);
 447 </pre>    \r
 448 </body>\r
 449 </html>