X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/source/CheckboxGroup.html?ds=sidebyside diff --git a/docs/source/CheckboxGroup.html b/docs/source/CheckboxGroup.html index ae9c4c67..e11b8971 100644 --- a/docs/source/CheckboxGroup.html +++ b/docs/source/CheckboxGroup.html @@ -1,50 +1,69 @@ -
+ +/** - * @class Ext.form.CheckboxGroup - * @extends Ext.form.FieldContainer - * <p>A {@link Ext.form.FieldContainer field container} which has a specialized layout for arranging + + + + +\ No newline at end of file +The source code + + + + + + +/** + * A {@link Ext.form.FieldContainer field container} which has a specialized layout for arranging * {@link Ext.form.field.Checkbox} controls into columns, and provides convenience {@link Ext.form.field.Field} methods * for {@link #getValue getting}, {@link #setValue setting}, and {@link #validate validating} the group - * of checkboxes as a whole.</p> - * <p><b>Validation:</b> Individual checkbox fields themselves have no default validation behavior, but + * of checkboxes as a whole. + * + * # Validation + * + * Individual checkbox fields themselves have no default validation behavior, but * sometimes you want to require a user to select at least one of a group of checkboxes. CheckboxGroup - * allows this by setting the config <tt>{@link #allowBlank}:false</tt>; when the user does not check at + * allows this by setting the config `{@link #allowBlank}:false`; when the user does not check at * least one of the checkboxes, the entire group will be highlighted as invalid and the - * {@link #blankText error message} will be displayed according to the {@link #msgTarget} config.</p> - * <p><b>Layout:</b> The default layout for CheckboxGroup makes it easy to arrange the checkboxes into + * {@link #blankText error message} will be displayed according to the {@link #msgTarget} config. + * + * # Layout + * + * The default layout for CheckboxGroup makes it easy to arrange the checkboxes into * columns; see the {@link #columns} and {@link #vertical} config documentation for details. You may also * use a completely different layout by setting the {@link #layout} to one of the other supported layout * types; for instance you may wish to use a custom arrangement of hbox and vbox containers. In that case - * the checkbox components at any depth will still be managed by the CheckboxGroup's validation.</p> - * {@img Ext.form.RadioGroup/Ext.form.RadioGroup.png Ext.form.RadioGroup component} - * <p>Example usage:</p> - * <pre><code> -Ext.create('Ext.form.Panel', { - title: 'RadioGroup Example', - width: 300, - height: 125, - bodyPadding: 10, - renderTo: Ext.getBody(), - items:[{ - xtype: 'radiogroup', - fieldLabel: 'Two Columns', - // Arrange radio buttons into two columns, distributed vertically - columns: 2, - vertical: true, - items: [ - {boxLabel: 'Item 1', name: 'rb', inputValue: '1'}, - {boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true}, - {boxLabel: 'Item 3', name: 'rb', inputValue: '3'}, - {boxLabel: 'Item 4', name: 'rb', inputValue: '4'}, - {boxLabel: 'Item 5', name: 'rb', inputValue: '5'}, - {boxLabel: 'Item 6', name: 'rb', inputValue: '6'} - ] - }] -}); - * </code></pre> - * @constructor - * Creates a new CheckboxGroup - * @param {Object} config Configuration options - * @xtype checkboxgroup + * the checkbox components at any depth will still be managed by the CheckboxGroup's validation. + * + * {@img Ext.form.CheckboxGroup/Ext.form.CheckboxGroup.png Ext.form.CheckboxGroup component} + * + * # Example usage + * + * Ext.create('Ext.form.Panel', { + * title: 'Checkbox Group', + * width: 300, + * height: 125, + * bodyPadding: 10, + * renderTo: Ext.getBody(), + * items:[{ + * xtype: 'checkboxgroup', + * fieldLabel: 'Two Columns', + * // Arrange radio buttons into two columns, distributed vertically + * columns: 2, + * vertical: true, + * items: [ + * {boxLabel: 'Item 1', name: 'rb', inputValue: '1'}, + * {boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true}, + * {boxLabel: 'Item 3', name: 'rb', inputValue: '3'}, + * {boxLabel: 'Item 4', name: 'rb', inputValue: '4'}, + * {boxLabel: 'Item 5', name: 'rb', inputValue: '5'}, + * {boxLabel: 'Item 6', name: 'rb', inputValue: '6'} + * ] + * }] + * }); + * */ Ext.define('Ext.form.CheckboxGroup', { extend:'Ext.form.FieldContainer', @@ -54,17 +73,17 @@ Ext.define('Ext.form.CheckboxGroup', { alias: 'widget.checkboxgroup', requires: ['Ext.layout.container.CheckboxGroup', 'Ext.form.field.Base'], - /** + /** * @cfg {String} name * @hide */ - /** + /** * @cfg {Array} items An Array of {@link Ext.form.field.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: * <ul><li><b>'auto'</b> : <p class="sub-desc">The controls will be rendered one per column on one row and the width @@ -79,7 +98,7 @@ Ext.define('Ext.form.CheckboxGroup', { */ 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 @@ -87,13 +106,13 @@ Ext.define('Ext.form.CheckboxGroup', { */ 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") */ @@ -105,7 +124,7 @@ Ext.define('Ext.form.CheckboxGroup', { // private groupCls : Ext.baseCSSPrefix + 'form-check-group', - /** + /** * @cfg {String} fieldBodyCls * An extra CSS class to be applied to the body content element in addition to {@link #baseBodyCls}. * Defaults to 'x-form-checkboxgroup-body'. @@ -121,7 +140,7 @@ Ext.define('Ext.form.CheckboxGroup', { me.initField(); }, - /** + /** * @protected * Initializes the field's value based on the initial config. If the {@link #value} config is specified * then we use that to set the value; otherwise we initialize the originalValue by querying the values of @@ -136,7 +155,7 @@ Ext.define('Ext.form.CheckboxGroup', { } }, - /** + /** * @protected * When a checkbox is added to the group, monitor it for changes */ @@ -162,7 +181,7 @@ Ext.define('Ext.form.CheckboxGroup', { return toQueryString(value1) === toQueryString(value2); }, - /** + /** * 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 @@ -175,14 +194,14 @@ Ext.define('Ext.form.CheckboxGroup', { return errors; }, - /** + /** * @private Returns all checkbox components within the container */ getBoxes: function() { return this.query('[isCheckbox]'); }, - /** + /** * @private Convenience function which calls the given function for every checkbox in the group * @param {Function} fn The function to call * @param {Object} scope Optional scope object @@ -191,7 +210,7 @@ Ext.define('Ext.form.CheckboxGroup', { Ext.Array.forEach(this.getBoxes(), fn, scope || this); }, - /** + /** * Returns an Array of all checkboxes in the container which are currently checked * @return {Array} Array of Ext.form.field.Checkbox components */ @@ -216,7 +235,7 @@ Ext.define('Ext.form.CheckboxGroup', { this.readOnly = readOnly; }, - /** + /** * Resets the checked state of all {@link Ext.form.field.Checkbox checkboxes} in the group to their * originally loaded values and clears any validation messages. * See {@link Ext.form.Basic}.{@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad} @@ -248,7 +267,7 @@ Ext.define('Ext.form.CheckboxGroup', { }, - /** + /** * <p>Sets the value(s) of all checkboxes in the group. The expected format is an Object of * name-value pairs corresponding to the names of the checkboxes in the group. Each pair can * have either a single or multiple values:</p> @@ -318,7 +337,7 @@ myCheckboxGroup.setValue({ }, - /** + /** * <p>Returns an object containing the values of all checked checkboxes within the group. Each key-value pair * in the object corresponds to a checkbox {@link Ext.form.field.Checkbox#name name}. If there is only one checked * checkbox with a particular name, the value of that pair will be the String @@ -389,4 +408,6 @@ myCheckboxGroup.setValue({ }); -