The source code

X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/CheckboxGroup.html diff --git a/docs/source/CheckboxGroup.html b/docs/source/CheckboxGroup.html new file mode 100644 index 00000000..b0b8c289 --- /dev/null +++ b/docs/source/CheckboxGroup.html @@ -0,0 +1,423 @@ + + + The source code + + + + +
/**
+ * @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:
+     * 'auto' : The controls will be rendered one per column on one row and the width
+     * of each column will be evenly distributed based on the width of the overall field container. This is the default.
+     * Number : If you specific a number (e.g., 3) that number of columns will be 
+     * created and the contained controls will be automatically distributed based on the value of {@link #vertical}.
+     * Array : ObjectYou can also specify an array of column widths, mixing integer
+     * (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will
+     * be rendered first, then any float values will be calculated as a percentage of the remaining space. Float
+     * values do not have to add up to 1 (100%) although if you want the controls to take up the entire field
+     * container you should do so.
+     */
+    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'
+        );   
+        Ext.form.CheckboxGroup.superclass.initComponent.call(this);
+    },
+    
+    // private
+    onRender : function(ct, position){
+        if(!this.el){
+            var panelCfg = {
+                cls: this.groupCls,
+                layout: 'column',
+                border: false,
+                renderTo: ct
+            };
+            var colCfg = {
+                defaultType: this.defaultType,
+                layout: 'form',
+                border: false,
+                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/**
+     * {@link Ext.form.Checkbox#setValue Set the value(s)} of an item or items
+     * in the group. Examples illustrating how this method may be called:
+     * 
+// call with name and value
+myCheckboxGroup.setValue('cb-col-1', true);
+// call with an array of boolean values 
+myCheckboxGroup.setValue([true, false, false]);
+// call with an object literal specifying item:value pairs
+myCheckboxGroup.setValue({
+    'cb-col-2': false,
+    'cb-col-3': true
+});
+// use comma separated string to set items with name to true (checked)
+myCheckboxGroup.setValue('cb-col-1,cb-col-3');
+     * 
+     * See {@link Ext.form.Checkbox#setValue} for additional information.
+     * @param {Mixed} id The checkbox to check, or as described by example shown.
+     * @param {Boolean} value (optional) The value to set the item.
+     * @return {Ext.form.CheckboxGroup} this
+     */
+    setValue : function(id, value){
+        if(this.rendered){
+            if(arguments.length == 1){
+                if(Ext.isArray(id)){
+                    //an array of boolean values
+                    Ext.each(id, function(val, idx){
+                        var item = this.items.itemAt(idx);
+                        if(item){
+                            item.setValue(val);
+                        }
+                    }, this);
+                }else if(Ext.isObject(id)){
+                    //set of name/value pairs
+                    for(var i in id){
+                        var f = this.getBox(i);
+                        if(f){
+                            f.setValue(id[i]);
+                        }
+                    }
+                }else{
+                    this.setValueForItem(id);
+                }
+            }else{
+                var f = this.getBox(id);
+                if(f){
+                    f.setValue(value);
+                }
+            }
+        }else{
+            this.values = arguments;
+        }
+        return this;
+    },
+    
+    // private
+    onDestroy: function(){
+        Ext.destroy(this.panel);
+        Ext.form.CheckboxGroup.superclass.onDestroy.call(this);
+
+    },
+    
+    setValueForItem : function(val){
+        val = String(val).split(',');
+        this.eachItem(function(item){
+            if(val.indexOf(item.inputValue)> -1){
+                item.setValue(true);
+            }
+        });
+    },
+    
+    // private
+    getBox : function(id){
+        var box = null;
+        this.eachItem(function(f){
+            if(id == f || f.dataIndex == id || f.id == id || f.getName() == id){
+                box = f;
+                return false;
+            }
+        });
+        return box;
+    },
+    
+    /**
+     * Gets an array of the selected {@link Ext.form.Checkbox} in the group.
+     * @return {Array} An array of the selected checkboxes.
+     */
+    getValue : function(){
+        var out = [];
+        this.eachItem(function(item){
+            if(item.checked){
+                out.push(item);
+            }
+        });
+        return out;
+    },
+    
+    // private
+    eachItem: function(fn){
+        if(this.items && this.items.each){
+            this.items.each(fn, this);
+        }
+    },
+    
+    /**
+     * @cfg {String} name
+     * @hide
+     */
+    /**
+     * @method initValue
+     * @hide
+     */
+    initValue : Ext.emptyFn,
+    /**
+     * @method getValue
+     * @hide
+     */
+    getValue : Ext.emptyFn,
+    /**
+     * @method getRawValue
+     * @hide
+     */
+    getRawValue : Ext.emptyFn,
+    
+    /**
+     * @method setRawValue
+     * @hide
+     */
+    setRawValue : Ext.emptyFn
+    
+});
+
+Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);
+
+ + \ No newline at end of file