X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/form/field/Radio.js diff --git a/src/form/field/Radio.js b/src/form/field/Radio.js index 60fb1763..4284afdb 100644 --- a/src/form/field/Radio.js +++ b/src/form/field/Radio.js @@ -13,178 +13,177 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @class Ext.form.field.Radio - * @extends Ext.form.field.Checkbox - -Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked -at a time within a group of radios with the same name. - -__Labeling:__ -In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons -may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also -see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons. - -__Values:__ -The main value of a Radio field is a boolean, indicating whether or not the radio is checked. - -The following values will check the radio: -* `true` -* `'true'` -* `'1'` -* `'on'` - -Any other value will uncheck it. - -In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent -as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this -value if you have multiple radio buttons with the same {@link #name}, as is almost always the case. -{@img Ext.form.Radio/Ext.form.Radio.png Ext.form.Radio component} -__Example usage:__ - - Ext.create('Ext.form.Panel', { - title : 'Order Form', - width : 300, - bodyPadding: 10, - renderTo : Ext.getBody(), - items: [ - { - xtype : 'fieldcontainer', - fieldLabel : 'Size', - defaultType: 'radiofield', - defaults: { - flex: 1 - }, - layout: 'hbox', - items: [ - { - boxLabel : 'M', - name : 'size', - inputValue: 'm', - id : 'radio1' - }, { - boxLabel : 'L', - name : 'size', - inputValue: 'l', - id : 'radio2' - }, { - boxLabel : 'XL', - name : 'size', - inputValue: 'xl', - id : 'radio3' - } - ] - }, - { - xtype : 'fieldcontainer', - fieldLabel : 'Color', - defaultType: 'radiofield', - defaults: { - flex: 1 - }, - layout: 'hbox', - items: [ - { - boxLabel : 'Blue', - name : 'color', - inputValue: 'blue', - id : 'radio4' - }, { - boxLabel : 'Grey', - name : 'color', - inputValue: 'grey', - id : 'radio5' - }, { - boxLabel : 'Black', - name : 'color', - inputValue: 'black', - id : 'radio6' - } - ] - } - ], - bbar: [ - { - text: 'Smaller Size', - handler: function() { - var radio1 = Ext.getCmp('radio1'), - radio2 = Ext.getCmp('radio2'), - radio3 = Ext.getCmp('radio3'); - - //if L is selected, change to M - if (radio2.getValue()) { - radio1.setValue(true); - return; - } - - //if XL is selected, change to L - if (radio3.getValue()) { - radio2.setValue(true); - return; - } - - //if nothing is set, set size to S - radio1.setValue(true); - } - }, - { - text: 'Larger Size', - handler: function() { - var radio1 = Ext.getCmp('radio1'), - radio2 = Ext.getCmp('radio2'), - radio3 = Ext.getCmp('radio3'); - - //if M is selected, change to L - if (radio1.getValue()) { - radio2.setValue(true); - return; - } - - //if L is selected, change to XL - if (radio2.getValue()) { - radio3.setValue(true); - return; - } - - //if nothing is set, set size to XL - radio3.setValue(true); - } - }, - '-', - { - text: 'Select color', - menu: { - indent: false, - items: [ - { - text: 'Blue', - handler: function() { - var radio = Ext.getCmp('radio4'); - radio.setValue(true); - } - }, - { - text: 'Grey', - handler: function() { - var radio = Ext.getCmp('radio5'); - radio.setValue(true); - } - }, - { - text: 'Black', - handler: function() { - var radio = Ext.getCmp('radio6'); - radio.setValue(true); - } - } - ] - } - } - ] - }); - - * @docauthor Robert Dougan - * @markdown + * + * Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked + * at a time within a group of radios with the same name. + * + * # Labeling + * + * In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons + * may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also + * see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons. + * + * # Values + * + * The main value of a Radio field is a boolean, indicating whether or not the radio is checked. + * + * The following values will check the radio: + * + * - `true` + * - `'true'` + * - `'1'` + * - `'on'` + * + * Any other value will uncheck it. + * + * In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent + * as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this + * value if you have multiple radio buttons with the same {@link #name}, as is almost always the case. + * + * # Example usage + * + * @example + * Ext.create('Ext.form.Panel', { + * title : 'Order Form', + * width : 300, + * bodyPadding: 10, + * renderTo : Ext.getBody(), + * items: [ + * { + * xtype : 'fieldcontainer', + * fieldLabel : 'Size', + * defaultType: 'radiofield', + * defaults: { + * flex: 1 + * }, + * layout: 'hbox', + * items: [ + * { + * boxLabel : 'M', + * name : 'size', + * inputValue: 'm', + * id : 'radio1' + * }, { + * boxLabel : 'L', + * name : 'size', + * inputValue: 'l', + * id : 'radio2' + * }, { + * boxLabel : 'XL', + * name : 'size', + * inputValue: 'xl', + * id : 'radio3' + * } + * ] + * }, + * { + * xtype : 'fieldcontainer', + * fieldLabel : 'Color', + * defaultType: 'radiofield', + * defaults: { + * flex: 1 + * }, + * layout: 'hbox', + * items: [ + * { + * boxLabel : 'Blue', + * name : 'color', + * inputValue: 'blue', + * id : 'radio4' + * }, { + * boxLabel : 'Grey', + * name : 'color', + * inputValue: 'grey', + * id : 'radio5' + * }, { + * boxLabel : 'Black', + * name : 'color', + * inputValue: 'black', + * id : 'radio6' + * } + * ] + * } + * ], + * bbar: [ + * { + * text: 'Smaller Size', + * handler: function() { + * var radio1 = Ext.getCmp('radio1'), + * radio2 = Ext.getCmp('radio2'), + * radio3 = Ext.getCmp('radio3'); + * + * //if L is selected, change to M + * if (radio2.getValue()) { + * radio1.setValue(true); + * return; + * } + * + * //if XL is selected, change to L + * if (radio3.getValue()) { + * radio2.setValue(true); + * return; + * } + * + * //if nothing is set, set size to S + * radio1.setValue(true); + * } + * }, + * { + * text: 'Larger Size', + * handler: function() { + * var radio1 = Ext.getCmp('radio1'), + * radio2 = Ext.getCmp('radio2'), + * radio3 = Ext.getCmp('radio3'); + * + * //if M is selected, change to L + * if (radio1.getValue()) { + * radio2.setValue(true); + * return; + * } + * + * //if L is selected, change to XL + * if (radio2.getValue()) { + * radio3.setValue(true); + * return; + * } + * + * //if nothing is set, set size to XL + * radio3.setValue(true); + * } + * }, + * '-', + * { + * text: 'Select color', + * menu: { + * indent: false, + * items: [ + * { + * text: 'Blue', + * handler: function() { + * var radio = Ext.getCmp('radio4'); + * radio.setValue(true); + * } + * }, + * { + * text: 'Grey', + * handler: function() { + * var radio = Ext.getCmp('radio5'); + * radio.setValue(true); + * } + * }, + * { + * text: 'Black', + * handler: function() { + * var radio = Ext.getCmp('radio6'); + * radio.setValue(true); + * } + * } + * ] + * } + * } + * ] + * }); */ Ext.define('Ext.form.field.Radio', { extend:'Ext.form.field.Checkbox', @@ -222,9 +221,9 @@ Ext.define('Ext.form.field.Radio', { }, /** - * Sets either the checked/unchecked status of this Radio, or, if a string value - * is passed, checks a sibling Radio of the same name whose value is the value specified. - * @param value {String/Boolean} Checked value, or the value of the sibling radio button to check. + * Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio + * of the same name whose value is the value specified. + * @param {String/Boolean} value Checked value, or the value of the sibling radio button to check. * @return {Ext.form.field.Radio} this */ setValue: function(v) { @@ -244,7 +243,7 @@ Ext.define('Ext.form.field.Radio', { /** * Returns the submit value for the checkbox which can be used when submitting forms. - * @return {Boolean/null} True if checked, null if not. + * @return {Boolean/Object} True if checked, null if not. */ getSubmitValue: function() { return this.checked ? this.inputValue : null; @@ -268,12 +267,6 @@ Ext.define('Ext.form.field.Radio', { } }, - // inherit docs - beforeDestroy: function(){ - this.callParent(); - this.getManager().removeAtKey(this.id); - }, - // inherit docs getManager: function() { return Ext.form.RadioManager;