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.
If you specific a number (e.g., 3) that number of columns will be + *
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}.
You 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 @@ -50,7 +51,7 @@ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, { */ columns : 'auto',
/** - * @cfg {Boolean} vertical True to distribute contained controls across columns, completely filling each column + * @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. @@ -62,17 +63,17 @@ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, { */ allowBlank : true, /** - * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must + * @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( @@ -83,33 +84,37 @@ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, { * @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', - border: false, - renderTo: ct + 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', - 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, @@ -118,14 +123,14 @@ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, { for(var i=0, len=this.items.length; i
// call with name and value
myCheckboxGroup.setValue('cb-col-1', true);
-// call with an array of boolean values
+// call with an array of boolean values
myCheckboxGroup.setValue([true, false, false]);
// call with an object literal specifying item:value pairs
myCheckboxGroup.setValue({
@@ -306,47 +336,52 @@ myCheckboxGroup.setValue('cb-col-1,cb-col-3');
* @param {Boolean} value (optional) The value to set the item.
* @return {Ext.form.CheckboxGroup} this
*/
- setValue : function(id, value){
+ setValue: function(){
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]);
- }
+ 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);
- }
+ this.setValueForItem(id);
}
}else{
- this.values = arguments;
+ var f = this.getBox(id);
+ if(f){
+ f.setValue(value);
+ }
}
- return this;
},
-
+
// private
- onDestroy: function(){
+ beforeDestroy: function(){
Ext.destroy(this.panel);
- Ext.form.CheckboxGroup.superclass.onDestroy.call(this);
+ Ext.form.CheckboxGroup.superclass.beforeDestroy.call(this);
},
-
+
setValueForItem : function(val){
val = String(val).split(',');
this.eachItem(function(item){
@@ -355,7 +390,7 @@ myCheckboxGroup.setValue('cb-col-1,cb-col-3');
}
});
},
-
+
// private
getBox : function(id){
var box = null;
@@ -367,8 +402,8 @@ myCheckboxGroup.setValue('cb-col-1,cb-col-3');
});
return box;
},
-
- /**
+
+ /**
* Gets an array of the selected {@link Ext.form.Checkbox} in the group.
* @return {Array} An array of the selected checkboxes.
*/
@@ -381,40 +416,31 @@ myCheckboxGroup.setValue('cb-col-1,cb-col-3');
});
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);