/** * @class Ext.form.CheckboxGroup * @extends Ext.form.Field *

A grouping container for {@link Ext.form.Checkbox} controls.

*

Sample usage:

*

var myCheckboxGroup = new Ext.form.CheckboxGroup({
    id:'myGroup',
    xtype: 'checkboxgroup',
    fieldLabel: 'Single Column',
    itemCls: 'x-check-group-alt',
    // Put all controls in a single column with width 100%
    columns: 1,
    items: [
        {boxLabel: 'Item 1', name: 'cb-col-1'},
        {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
        {boxLabel: 'Item 3', name: 'cb-col-3'}
    ]
});
 * 
* @constructor * Creates a new CheckboxGroup * @param {Object} config Configuration options * @xtype checkboxgroup */ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
/** * @cfg {Array} items An Array of {@link Ext.form.Checkbox Checkbox}es or Checkbox config objects * to arrange in the group. */
/** * @cfg {String/Number/Array} columns Specifies the number of columns to use when displaying grouped * checkbox/radio controls using automatic layout. This config can take several types of values: * */ columns : 'auto',
/** * @cfg {Boolean} vertical True to distribute contained controls across columns, completely filling each column * top to bottom before starting on the next column. The number of controls in each column will be automatically * calculated to keep columns as even as possible. The default value is false, so that controls will be added * to columns one at a time, completely filling each row left to right before starting on the next row. */ vertical : false,
/** * @cfg {Boolean} allowBlank False to validate that at least one item in the group is checked (defaults to true). * If no items are selected at validation time, {@link @blankText} will be used as the error text. */ allowBlank : true,
/** * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must * select at least one item in this group") */ blankText : "You must select at least one item in this group", // private defaultType : 'checkbox', // private groupCls : 'x-form-check-group', // private initComponent: function(){ this.addEvents(
/** * @event change * Fires when the state of a child checkbox changes. * @param {Ext.form.CheckboxGroup} this * @param {Array} checked An array containing the checked boxes. */ 'change' ); this.on('change', this.validate, this); Ext.form.CheckboxGroup.superclass.initComponent.call(this); }, // private onRender : function(ct, position){ if(!this.el){ var panelCfg = { autoEl: { id: this.id }, cls: this.groupCls, layout: 'column', renderTo: ct, bufferResize: false // Default this to false, since it doesn't really have a proper ownerCt. }; var colCfg = { xtype: 'container', defaultType: this.defaultType, layout: 'form', defaults: { hideLabel: true, anchor: '100%' } }; if(this.items[0].items){ // The container has standard ColumnLayout configs, so pass them in directly Ext.apply(panelCfg, { layoutConfig: {columns: this.items.length}, defaults: this.defaults, items: this.items }); for(var i=0, len=this.items.length; i0 && i%rows==0){ ri++; } if(this.items[i].fieldLabel){ this.items[i].hideLabel = false; } cols[ri].items.push(this.items[i]); }; }else{ for(var i=0, len=this.items.length; i