The source code

X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..05ce1c11e98b33f14ddee184493bd5a60dc947e2:/docs/source/CheckboxGroup.html diff --git a/docs/source/CheckboxGroup.html b/docs/source/CheckboxGroup.html index b0b8c289..d9c6302a 100644 --- a/docs/source/CheckboxGroup.html +++ b/docs/source/CheckboxGroup.html @@ -1,423 +1,448 @@ - - - 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
+
+
+  The source code
+    
+    
+
+
+    /*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
  */
-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);
-    
-
+/**
+ * @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 = {
+                id: this.id,
+                cls: this.groupCls,
+                layout: 'column',
+                border: false,
+                renderTo: ct,
+                bufferResize: false // Default this to false, since it doesn't really have a proper ownerCt.
+            };
+            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(){
+        if(this.rendered){
+            this.onSetValue.apply(this, arguments);
+        }else{
+            this.buffered = true;
+            this.value = arguments;
+        }
+        return this;
+    },
+    
+    onSetValue: function(id, value){
+        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);
+            }
+        }
+    },
+    
+    // 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 getRawValue
+     * @hide
+     */
+    getRawValue : Ext.emptyFn,
+    
+    /**
+     * @method setRawValue
+     * @hide
+     */
+    setRawValue : Ext.emptyFn
+    
+});
+
+Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);
+
+ \ No newline at end of file