-<html>\r
-<head>\r
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><div id="cls-Ext.form.Radio"></div>/**
- * @class Ext.form.Radio
- * @extends Ext.form.Checkbox
- * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
- * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../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-method-constructor'><span id='Ext-form-field-Radio'>/**
+</span></span> * @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);
+ }
+ }
+ ]
+ }
+ }
+ ]
+ });
+
+
git.ithinksw.org / extjs.git / blobdiff