Radio.html
9.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!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-uncheckedValue'> /**
</span> * @cfg {String} uncheckedValue
* @private
*/
// private
inputType: 'radio',
ariaRole: 'radio',
formId: null,
<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);
}
},
onRemoved: function(){
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;
},
getModelData: function() {
return this.getSubmitData();
},
// inherit docs
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);
}
}
}
},
// inherit docs
getManager: function() {
return Ext.form.RadioManager;
}
});
</pre>
</body>
</html>