/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.2
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
* checkbox/radio controls using automatic layout. This config can take several types of values:
* <ul><li><b>'auto'</b> : <p class="sub-desc">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.</p></li>
- * <li><b>Number</b> : <p class="sub-desc">If you specific a number (e.g., 3) that number of columns will be
+ * <li><b>Number</b> : <p class="sub-desc">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}.</p></li>
* <li><b>Array</b> : Object<p class="sub-desc">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
*/
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.
*/
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(
* @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,
for(var i=0, len=this.items.length; i<len; i++){
Ext.applyIf(this.items[i], colCfg);
}
-
+
}else{
-
+
// The container has field item configs, so we have to generate the column
// panels first then move the items into the columns as needed.
-
+
var numCols, cols = [];
-
+
if(typeof this.columns == 'string'){ // 'auto' so create a col per item
this.columns = this.items.length;
}
}
this.columns = cs;
}
-
+
numCols = this.columns.length;
-
+
// Generate the column configs with the correct width setting
for(var i=0; i<numCols; i++){
var cc = Ext.apply({items:[]}, colCfg);
cc[this.columns[i] <= 1 ? 'columnWidth' : 'width'] = this.columns[i];
if(this.defaults){
- cc.defaults = Ext.apply(cc.defaults || {}, this.defaults)
+ cc.defaults = Ext.apply(cc.defaults || {}, this.defaults);
}
cols.push(cc);
};
-
+
// Distribute the original items into the columns
if(this.vertical){
var rows = Math.ceil(this.items.length / numCols), ri = 0;
cols[ci].items.push(this.items[i]);
};
}
-
+
Ext.apply(panelCfg, {
layoutConfig: {columns: numCols},
items: cols
});
}
-
- this.panel = new Ext.Panel(panelCfg);
+
+ this.panel = new Ext.Container(panelCfg);
this.panel.ownerCt = this;
this.el = this.panel.getEl();
-
+
if(this.forId && this.itemCls){
var l = this.el.up(this.itemCls).child('label', true);
if(l){
l.setAttribute('htmlFor', this.forId);
}
}
-
+
var fields = this.panel.findBy(function(c){
return c.isFormField;
}, this);
-
+
this.items = new Ext.util.MixedCollection();
this.items.addAll(fields);
}
Ext.form.CheckboxGroup.superclass.onRender.call(this, ct, position);
},
-
+
+ initValue : function(){
+ if(this.value){
+ this.setValue.apply(this, this.buffered ? this.value : [this.value]);
+ delete this.buffered;
+ delete this.value;
+ }
+ },
+
afterRender : function(){
Ext.form.CheckboxGroup.superclass.afterRender.call(this);
- if(this.values){
- this.setValue.apply(this, this.values);
- delete this.values;
- }
this.eachItem(function(item){
item.on('check', this.fireChecked, this);
item.inGroup = true;
});
},
-
+
// private
doLayout: function(){
//ugly method required to layout hidden items
this.panel.doLayout();
}
},
-
+
// private
fireChecked: function(){
var arr = [];
this.fireEvent('change', this, arr);
},
- // private
- validateValue : function(value){
- if(!this.allowBlank){
+ /**
+ * Runs CheckboxGroup's validations and returns an array of any errors. The only error by default
+ * is if allowBlank is set to true and no items are checked.
+ * @return {Array} Array of all validation errors
+ */
+ getErrors: function() {
+ var errors = Ext.form.CheckboxGroup.superclass.getErrors.apply(this, arguments);
+
+ if (!this.allowBlank) {
var blank = true;
+
this.eachItem(function(f){
- if(f.checked){
+ if (f.checked) {
return (blank = false);
}
});
- if(blank){
- this.markInvalid(this.blankText);
+
+ if (blank) errors.push(this.blankText);
+ }
+
+ return errors;
+ },
+
+ // private
+ isDirty: function(){
+ //override the behaviour to check sub items.
+ if (this.disabled || !this.rendered) {
+ return false;
+ }
+
+ var dirty = false;
+
+ this.eachItem(function(item){
+ if(item.isDirty()){
+ dirty = true;
return false;
}
+ });
+
+ return dirty;
+ },
+
+ // private
+ setReadOnly : function(readOnly){
+ if(this.rendered){
+ this.eachItem(function(item){
+ item.setReadOnly(readOnly);
+ });
}
- return true;
+ this.readOnly = readOnly;
},
-
+
// private
onDisable : function(){
this.eachItem(function(item){
item.enable();
});
},
-
- // private
- doLayout: function(){
- if(this.rendered){
- this.panel.forceLayout = this.ownerCt.forceLayout;
- this.panel.doLayout();
- }
- },
-
+
// private
onResize : function(w, h){
this.panel.setSize(w, h);
this.panel.doLayout();
},
-
+
// inherit docs from Field
reset : function(){
- Ext.form.CheckboxGroup.superclass.reset.call(this);
- this.eachItem(function(c){
- if(c.reset){
- c.reset();
- }
- });
+ if (this.originalValue) {
+ // Clear all items
+ this.eachItem(function(c){
+ if(c.setValue){
+ c.setValue(false);
+ c.originalValue = c.getValue();
+ }
+ });
+ // Set items stored in originalValue, ugly - set a flag to reset the originalValue
+ // during the horrible onSetValue. This will allow trackResetOnLoad to function.
+ this.resetOriginal = true;
+ this.setValue(this.originalValue);
+ delete this.resetOriginal;
+ } else {
+ this.eachItem(function(c){
+ if(c.reset){
+ c.reset();
+ }
+ });
+ }
+ // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete.
+ // Important because reset is being called on both the group and the individual items.
+ (function() {
+ this.clearInvalid();
+ }).defer(50, this);
},
-
+
/**
* {@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:
* <pre><code>
// 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({
* @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){
+ this.onSetValue.apply(this, arguments);
+ }else{
+ this.buffered = true;
+ this.value = arguments;
+ }
+ return this;
+ },
+
+ /**
+ * @private
+ * Sets the values of one or more of the items within the CheckboxGroup
+ * @param {String|Array|Object} id Can take multiple forms. Can be optionally:
+ * <ul>
+ * <li>An ID string to be used with a second argument</li>
+ * <li>An array of the form ['some', 'list', 'of', 'ids', 'to', 'mark', 'checked']</li>
+ * <li>An array in the form [true, true, false, true, false] etc, where each item relates to the check status of
+ * the checkbox at the same index</li>
+ * <li>An object containing ids of the checkboxes as keys and check values as properties</li>
+ * </ul>
+ * @param {String} value The value to set the field to if the first argument was a string
+ */
+ onSetValue: function(id, value){
+ if(arguments.length == 1){
+ if(Ext.isArray(id)){
+ Ext.each(id, function(val, idx){
+ if (Ext.isObject(val) && val.setValue){ // array of checkbox components to be checked
+ val.setValue(true);
+ if (this.resetOriginal === true) {
+ val.originalValue = val.getValue();
+ }
+ } else { // an array of boolean values
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);
+ }, 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{
- 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){
}
});
},
-
+
// private
getBox : function(id){
var box = null;
});
return box;
},
-
+
/**
* Gets an array of the selected {@link Ext.form.Checkbox} in the group.
* @return {Array} An array of the selected checkboxes.
});
return out;
},
-
- // private
- eachItem: function(fn){
+
+ /**
+ * @private
+ * Convenience function which passes the given function to every item in the composite
+ * @param {Function} fn The function to call
+ * @param {Object} scope Optional scope object
+ */
+ eachItem: function(fn, scope) {
if(this.items && this.items.each){
- this.items.each(fn, this);
+ this.items.each(fn, scope || 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);
git.ithinksw.org / extjs.git / blobdiff