Radio.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-form-field-Radio'>/**
  19. </span> * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
  20. *
  21. * Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
  22. * at a time within a group of radios with the same name.
  23. *
  24. * # Labeling
  25. *
  26. * In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons
  27. * may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also
  28. * see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons.
  29. *
  30. * # Values
  31. *
  32. * The main value of a Radio field is a boolean, indicating whether or not the radio is checked.
  33. *
  34. * The following values will check the radio:
  35. *
  36. * - `true`
  37. * - `'true'`
  38. * - `'1'`
  39. * - `'on'`
  40. *
  41. * Any other value will uncheck it.
  42. *
  43. * In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent
  44. * as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this
  45. * value if you have multiple radio buttons with the same {@link #name}, as is almost always the case.
  46. *
  47. * # Example usage
  48. *
  49. * @example
  50. * Ext.create('Ext.form.Panel', {
  51. * title : 'Order Form',
  52. * width : 300,
  53. * bodyPadding: 10,
  54. * renderTo : Ext.getBody(),
  55. * items: [
  56. * {
  57. * xtype : 'fieldcontainer',
  58. * fieldLabel : 'Size',
  59. * defaultType: 'radiofield',
  60. * defaults: {
  61. * flex: 1
  62. * },
  63. * layout: 'hbox',
  64. * items: [
  65. * {
  66. * boxLabel : 'M',
  67. * name : 'size',
  68. * inputValue: 'm',
  69. * id : 'radio1'
  70. * }, {
  71. * boxLabel : 'L',
  72. * name : 'size',
  73. * inputValue: 'l',
  74. * id : 'radio2'
  75. * }, {
  76. * boxLabel : 'XL',
  77. * name : 'size',
  78. * inputValue: 'xl',
  79. * id : 'radio3'
  80. * }
  81. * ]
  82. * },
  83. * {
  84. * xtype : 'fieldcontainer',
  85. * fieldLabel : 'Color',
  86. * defaultType: 'radiofield',
  87. * defaults: {
  88. * flex: 1
  89. * },
  90. * layout: 'hbox',
  91. * items: [
  92. * {
  93. * boxLabel : 'Blue',
  94. * name : 'color',
  95. * inputValue: 'blue',
  96. * id : 'radio4'
  97. * }, {
  98. * boxLabel : 'Grey',
  99. * name : 'color',
  100. * inputValue: 'grey',
  101. * id : 'radio5'
  102. * }, {
  103. * boxLabel : 'Black',
  104. * name : 'color',
  105. * inputValue: 'black',
  106. * id : 'radio6'
  107. * }
  108. * ]
  109. * }
  110. * ],
  111. * bbar: [
  112. * {
  113. * text: 'Smaller Size',
  114. * handler: function() {
  115. * var radio1 = Ext.getCmp('radio1'),
  116. * radio2 = Ext.getCmp('radio2'),
  117. * radio3 = Ext.getCmp('radio3');
  118. *
  119. * //if L is selected, change to M
  120. * if (radio2.getValue()) {
  121. * radio1.setValue(true);
  122. * return;
  123. * }
  124. *
  125. * //if XL is selected, change to L
  126. * if (radio3.getValue()) {
  127. * radio2.setValue(true);
  128. * return;
  129. * }
  130. *
  131. * //if nothing is set, set size to S
  132. * radio1.setValue(true);
  133. * }
  134. * },
  135. * {
  136. * text: 'Larger Size',
  137. * handler: function() {
  138. * var radio1 = Ext.getCmp('radio1'),
  139. * radio2 = Ext.getCmp('radio2'),
  140. * radio3 = Ext.getCmp('radio3');
  141. *
  142. * //if M is selected, change to L
  143. * if (radio1.getValue()) {
  144. * radio2.setValue(true);
  145. * return;
  146. * }
  147. *
  148. * //if L is selected, change to XL
  149. * if (radio2.getValue()) {
  150. * radio3.setValue(true);
  151. * return;
  152. * }
  153. *
  154. * //if nothing is set, set size to XL
  155. * radio3.setValue(true);
  156. * }
  157. * },
  158. * '-',
  159. * {
  160. * text: 'Select color',
  161. * menu: {
  162. * indent: false,
  163. * items: [
  164. * {
  165. * text: 'Blue',
  166. * handler: function() {
  167. * var radio = Ext.getCmp('radio4');
  168. * radio.setValue(true);
  169. * }
  170. * },
  171. * {
  172. * text: 'Grey',
  173. * handler: function() {
  174. * var radio = Ext.getCmp('radio5');
  175. * radio.setValue(true);
  176. * }
  177. * },
  178. * {
  179. * text: 'Black',
  180. * handler: function() {
  181. * var radio = Ext.getCmp('radio6');
  182. * radio.setValue(true);
  183. * }
  184. * }
  185. * ]
  186. * }
  187. * }
  188. * ]
  189. * });
  190. */
  191. Ext.define('Ext.form.field.Radio', {
  192. extend:'Ext.form.field.Checkbox',
  193. alias: ['widget.radiofield', 'widget.radio'],
  194. alternateClassName: 'Ext.form.Radio',
  195. requires: ['Ext.form.RadioManager'],
  196. <span id='Ext-form-field-Radio-property-isRadio'> /**
  197. </span> * @property {Boolean} isRadio
  198. * `true` in this class to identify an object as an instantiated Radio, or subclass thereof.
  199. */
  200. isRadio: true,
  201. <span id='Ext-form-field-Radio-cfg-uncheckedValue'> /**
  202. </span> * @cfg {String} uncheckedValue
  203. * @private
  204. */
  205. // private
  206. inputType: 'radio',
  207. ariaRole: 'radio',
  208. formId: null,
  209. <span id='Ext-form-field-Radio-method-getGroupValue'> /**
  210. </span> * If this radio is part of a group, it will return the selected value
  211. * @return {String}
  212. */
  213. getGroupValue: function() {
  214. var selected = this.getManager().getChecked(this.name, this.getFormId());
  215. return selected ? selected.inputValue : null;
  216. },
  217. <span id='Ext-form-field-Radio-method-onBoxClick'> /**
  218. </span> * @private Handle click on the radio button
  219. */
  220. onBoxClick: function(e) {
  221. var me = this;
  222. if (!me.disabled &amp;&amp; !me.readOnly) {
  223. this.setValue(true);
  224. }
  225. },
  226. onRemoved: function(){
  227. this.callParent(arguments);
  228. this.formId = null;
  229. },
  230. <span id='Ext-form-field-Radio-method-setValue'> /**
  231. </span> * Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio
  232. * of the same name whose value is the value specified.
  233. * @param {String/Boolean} value Checked value, or the value of the sibling radio button to check.
  234. * @return {Ext.form.field.Radio} this
  235. */
  236. setValue: function(v) {
  237. var me = this,
  238. active;
  239. if (Ext.isBoolean(v)) {
  240. me.callParent(arguments);
  241. } else {
  242. active = me.getManager().getWithValue(me.name, v, me.getFormId()).getAt(0);
  243. if (active) {
  244. active.setValue(true);
  245. }
  246. }
  247. return me;
  248. },
  249. <span id='Ext-form-field-Radio-method-getSubmitValue'> /**
  250. </span> * Returns the submit value for the checkbox which can be used when submitting forms.
  251. * @return {Boolean/Object} True if checked, null if not.
  252. */
  253. getSubmitValue: function() {
  254. return this.checked ? this.inputValue : null;
  255. },
  256. getModelData: function() {
  257. return this.getSubmitData();
  258. },
  259. // inherit docs
  260. onChange: function(newVal, oldVal) {
  261. var me = this,
  262. r, rLen, radio, radios;
  263. me.callParent(arguments);
  264. if (newVal) {
  265. radios = me.getManager().getByName(me.name, me.getFormId()).items;
  266. rLen = radios.length;
  267. for (r = 0; r &lt; rLen; r++) {
  268. radio = radios[r];
  269. if (radio !== me) {
  270. radio.setValue(false);
  271. }
  272. }
  273. }
  274. },
  275. // inherit docs
  276. getManager: function() {
  277. return Ext.form.RadioManager;
  278. }
  279. });
  280. </pre>
  281. </body>
  282. </html>