<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-form-field-Radio'>/**
|
</span> * @docauthor Robert Dougan <rob@sencha.com>
|
*
|
* 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',
|
alias: ['widget.radiofield', 'widget.radio'],
|
alternateClassName: 'Ext.form.Radio',
|
requires: ['Ext.form.RadioManager'],
|
|
<span id='Ext-form-field-Radio-property-isRadio'> /**
|
</span> * @property {Boolean} isRadio
|
* `true` in this class to identify an object as an instantiated Radio, or subclass thereof.
|
*/
|
isRadio: true,
|
|
<span id='Ext-form-field-Radio-cfg-focusCls'> /**
|
</span> * @cfg {String} [focusCls='x-form-radio-focus']
|
* The CSS class to use when the radio field receives focus
|
*/
|
focusCls: 'form-radio-focus',
|
|
<span id='Ext-form-field-Radio-cfg-uncheckedValue'> /**
|
</span> * @cfg {String} uncheckedValue
|
* @private
|
*/
|
|
<span id='Ext-form-field-Radio-cfg-inputType'> // private
|
</span> inputType: 'radio',
|
<span id='Ext-form-field-Radio-property-ariaRole'> ariaRole: 'radio',
|
</span>
|
<span id='Ext-form-field-Radio-property-formId'> formId: null,
|
</span>
|
<span id='Ext-form-field-Radio-method-getGroupValue'> /**
|
</span> * If this radio is part of a group, it will return the selected value
|
* @return {String}
|
*/
|
getGroupValue: function() {
|
var selected = this.getManager().getChecked(this.name, this.getFormId());
|
return selected ? selected.inputValue : null;
|
},
|
|
<span id='Ext-form-field-Radio-method-onBoxClick'> /**
|
</span> * @private Handle click on the radio button
|
*/
|
onBoxClick: function(e) {
|
var me = this;
|
if (!me.disabled && !me.readOnly) {
|
this.setValue(true);
|
}
|
},
|
|
<span id='Ext-form-field-Radio-method-onRemoved'> onRemoved: function(){
|
</span> this.callParent(arguments);
|
this.formId = null;
|
},
|
|
<span id='Ext-form-field-Radio-method-setValue'> /**
|
</span> * 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) {
|
var me = this,
|
active;
|
|
if (Ext.isBoolean(v)) {
|
me.callParent(arguments);
|
} else {
|
active = me.getManager().getWithValue(me.name, v, me.getFormId()).getAt(0);
|
if (active) {
|
active.setValue(true);
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-form-field-Radio-method-getSubmitValue'> /**
|
</span> * Returns the submit value for the checkbox which can be used when submitting forms.
|
* @return {Boolean/Object} True if checked, null if not.
|
*/
|
getSubmitValue: function() {
|
return this.checked ? this.inputValue : null;
|
},
|
|
<span id='Ext-form-field-Radio-method-getModelData'> getModelData: function() {
|
</span> return this.getSubmitData();
|
},
|
|
<span id='Ext-form-field-Radio-method-onChange'> // inherit docs
|
</span> onChange: function(newVal, oldVal) {
|
var me = this,
|
r, rLen, radio, radios;
|
|
me.callParent(arguments);
|
|
if (newVal) {
|
radios = me.getManager().getByName(me.name, me.getFormId()).items;
|
rLen = radios.length;
|
|
for (r = 0; r < rLen; r++) {
|
radio = radios[r];
|
|
if (radio !== me) {
|
radio.setValue(false);
|
}
|
}
|
}
|
},
|
|
<span id='Ext-form-field-Radio-method-getManager'> // inherit docs
|
</span> getManager: function() {
|
return Ext.form.RadioManager;
|
}
|
});
|
</pre>
|
</body>
|
</html>
|