/** * This Field is useful for containing multiple {@link Ext.field.Radio radiofield}. * * It plots items into wither horizontal / vertical depending on * {@link Ext.field.FieldGroupContainer#vertical} config properties. * * ## Example usage * * ```javascript * @example({ framework: 'extjs' }) * Ext.create('Ext.form.Panel', { * title: 'RadioGroup Example', * width: 300, * height: 125, * fullscreen: true, * items:[{ * xtype: 'radiogroup', * label: 'Two Columns', * // Arrange radio field distributed vertically. * // Automatically latter items flow to next column if * // available height is less to display all the items in single column. * vertical: true, * height: 100, * items: [ * { label: 'Item 1', name: 'rb', value: '1' }, * { label: 'Item 2', name: 'rb', value: '2', checked: true}, * { label: 'Item 3', name: 'rb', value: '3' }, * { label: 'Item 4', name: 'rb', value: '4' }, * { label: 'Item 5', name: 'rb', value: '5' }, * { label: 'Item 6', name: 'rb', value: '6' } * ] * }] * }); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtFormPanel, ExtRadioGroup, ExtRadioField } from '@sencha/ext-react'; * * export default class MyExample extends Component { * render() { * return ( * <ExtFormPanel * title="RadioGroup Example" * width={600} * height={300} * fullscreen * > * <ExtRadioGroup * label="Two Columns" * vertical={true} * height={100} * > * <ExtRadioField * label="Item 1" * name="rb" * value={1} * > * </ExtRadioField> * <ExtRadioField * label="Item 2" * name="rb" * value={2} * checked={true} * > * </ExtRadioField> * <ExtRadioField * label="Item 3" * name="rb" * value={3} * > * </ExtRadioField> * <ExtRadioField * label="Item 4" * name="rb" * value={4} * > * </ExtRadioField> * <ExtRadioField * label="Item 5" * name="rb" * value={5} * > * </ExtRadioField> * <ExtRadioField * label="Item 6" * name="rb" * value={6} * > * </ExtRadioField> * </ExtRadioGroup> * </ExtFormPanel> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'radiogroup-component', * styles: [``], * template: ` * <ExtFormPanel * title="RadioGroup Example" * [width]="600" * [height]="400" * [fullscreen]="true" * > * <ExtRadioGroup * [label]="'Two Columns'" * [vertical]="true" * [height]="100" * > * <ExtRadioField * [label]="'Item 1'" * [name]="'rb'" * value="1" * > * </ExtRadioField> * <ExtRadioField * [label]="'Item 2'" * [name]="'rb'" * value="2" * [checked]="true" * > * </ExtRadioField> * <ExtRadioField * [label]="'Item 3'" * [name]="'rb'" * value="3" * > * </ExtRadioField> * <ExtRadioField * [label]="'Item 4'" * [name]="'rb'" * value="4" * > * </ExtRadioField> * <ExtRadioField * [label]="'Item 5'" * [name]="'rb'" * value="5" * > * </ExtRadioField> * <ExtRadioField * [label]="'Item 6'" * [name]="'rb'" * value="6" * > * </ExtRadioField> * </ExtRadioGroup> * </ExtFormPanel>` * }) * export class RadioGroupComponents {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-formpanel * title="RadioGroup Example" * width="300" * height="125" * fullscreen="true" * > * <ext-radiogroup * label="Two Columns" * vertical="true" * height="100" * > * <ext-radiofield * label="Item 1" * name="rb" * value="1" * > * </ext-radiofield> * <ext-radiofield * label="Item 2" * name="rb" * value="2" * checked="true" * > * </ext-radiofield> * <ext-radiofield * label="Item 3" * name="rb" * value="3" * > * </ext-radiofield> * <ext-radiofield * label="Item 4" * name="rb" * value="4" * > * </ext-radiofield> * <ext-radiofield * label="Item 5" * name="rb" * value="5" * > * </ext-radiofield> * <ext-radiofield * label="Item 6" * name="rb" * value="6" * > * </ext-radiofield> * </ext-radiogroup> * </ext-formpanel> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-radiogroup.component'; * import '@sencha/ext-web-components/dist/ext-radiofield.component'; * export default class RadioGroupComponent {} * ``` * * ## Binding Example * * In the below example, "Item 2" will initially be checked using `myValue: '2'` from * the ViewModel. * * @example * Ext.define('MyApp.main.view.MainModel', { * extend: 'Ext.app.ViewModel', * alias: 'viewmodel.main', * data: { * myValue: '2' * } * }); * * Ext.create('Ext.form.Panel', { * title: 'RadioGroup Example', * viewModel: { * type: 'main' * }, * width: 300, * bodyPadding: 10, * renderTo: Ext.getBody(), * items:[{ * xtype: 'radiogroup', * label: 'Two Columns', * vertical: true, * height: 100, * bind: '{myValue}', * items: [ * { label: 'Item 1', name: 'rb', value: '1' }, * { label: 'Item 2', name: 'rb', value: '2' }, * { label: 'Item 3', name: 'rb', value: '3' }, * { label: 'Item 4', name: 'rb', value: '4' }, * { label: 'Item 5', name: 'rb', value: '5' }, * { label: 'Item 6', name: 'rb', value: '6' } * ] * }] * }); * * @since 7.0 */Ext.define('Ext.field.RadioGroup', { extend: 'Ext.field.FieldGroupContainer', xtype: 'radiogroup', requires: ['Ext.field.Radio'], /** * @property {Boolean} isRadioGroup * The value `true` to identify an object as an instance of this or derived class. * @readonly */ isRadioGroup: true, /** * @property {String} defaultType * Default item type in radio group * @readonly */ defaultType: 'radiofield', /** * @cfg {Boolean} simpleValue * When set to `true` the `value` of this group of `radiofield` components will be * mapped to the `value` of the checked item. * * This field allows the `radiogroup` to participate in binding an entire group of * radio buttons to a single value. */ simpleValue: true, delegate: '[isRadio]', instanceCls: Ext.baseCSSPrefix + 'radio-group', /** * @method getChecked * return first checked radio field from group */ getChecked: function(query) { return this.getGroupItems('[checked]' + (query || ''))[0]; }, isEqual: function(value1, value2) { if (this.simpleValue) { return String(value1) === String(value2); } return this.callParent([value1, value2]); }, /** * Sets the checked status of the radio group. * If {@link #simpleValue `simpleValue`} is `true`, * value must be a single value, the child radiobutton matching the value * will be checked. If `simpleValue` is not used, value must be an object of name-value * pairs, each child radiobutton matching the name and value will be checked. * @param {String/Object} value Checked value, or the value of the sibling radio button * to check. * @return {Ext.field.RadioGroup} this */ setValue: function(value) { var me = this, items, len, item, i, rbValue, name; // Ignore if value is equals to last updated value if (me.isEqual(value, me.lastValue)) { return me; } items = me.getGroupItems(); len = items.length; me.suspendCheckChange = 1; if (me.simpleValue) { for (i = 0; i < len; i++) { item = items[i]; if (item.getValue() === value) { item.setChecked(true); break; } } } else if (Ext.isObject(value)) { for (name in value) { rbValue = value[name]; for (i = 0; i < len; i++) { item = items[i]; if (item.getName() === name && rbValue === item.getValue()) { item.setChecked(true); break; } } } } me.suspendCheckChange = 0; me.onGroupChange(); return me; }, getValue: function() { var me = this, items, ln, values, item, name, value, bucket, b, field; if (me.simpleValue) { field = me.getChecked(); if (field) { value = field.getValue(); } return value; } items = this.getGroupItems(); ln = items.length; values = {}; for (b = 0; b < ln; b++) { item = items[b]; name = item.getName(); value = item.getValue(); if (value && item.getChecked()) { if (values.hasOwnProperty(name)) { bucket = values[name]; if (!Ext.isArray(bucket)) { bucket = values[name] = [bucket]; } bucket.push(value); } else { values[name] = value; } } } return values; }});