RadioGroup.html
5.56 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
<!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-RadioGroup'>/**
</span> * A {@link Ext.form.FieldContainer field container} which has a specialized layout for arranging
* {@link Ext.form.field.Radio} controls into columns, and provides convenience {@link Ext.form.field.Field}
* methods for {@link #getValue getting}, {@link #setValue setting}, and {@link #validate validating} the
* group of radio buttons as a whole.
*
* # Validation
*
* Individual radio buttons themselves have no default validation behavior, but
* sometimes you want to require a user to select one of a group of radios. RadioGroup
* allows this by setting the config `{@link #allowBlank}:false`; when the user does not check at
* one of the radio buttons, the entire group will be highlighted as invalid and the
* {@link #blankText error message} will be displayed according to the {@link #msgTarget} config.
*
* # Layout
*
* The default layout for RadioGroup makes it easy to arrange the radio buttons into
* columns; see the {@link #columns} and {@link #vertical} config documentation for details. You may also
* use a completely different layout by setting the {@link #layout} to one of the other supported layout
* types; for instance you may wish to use a custom arrangement of hbox and vbox containers. In that case
* the Radio components at any depth will still be managed by the RadioGroup's validation.
*
* # Example usage
*
* @example
* Ext.create('Ext.form.Panel', {
* title: 'RadioGroup Example',
* width: 300,
* height: 125,
* bodyPadding: 10,
* renderTo: Ext.getBody(),
* items:[{
* xtype: 'radiogroup',
* fieldLabel: 'Two Columns',
* // Arrange radio buttons into two columns, distributed vertically
* columns: 2,
* vertical: true,
* items: [
* { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
* { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
* { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
* { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
* { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
* { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
* ]
* }]
* });
*
*/
Ext.define('Ext.form.RadioGroup', {
extend: 'Ext.form.CheckboxGroup',
alias: 'widget.radiogroup',
<span id='Ext-form-RadioGroup-cfg-items'> /**
</span> * @cfg {Ext.form.field.Radio[]/Object[]} items
* An Array of {@link Ext.form.field.Radio Radio}s or Radio config objects to arrange in the group.
*/
<span id='Ext-form-RadioGroup-cfg-allowBlank'> /**
</span> * @cfg {Boolean} allowBlank
* True to allow every item in the group to be blank.
* If allowBlank = false and no items are selected at validation time, {@link #blankText} will
* be used as the error text.
*/
allowBlank : true,
//<locale>
<span id='Ext-form-RadioGroup-cfg-blankText'> /**
</span> * @cfg {String} blankText
* Error text to display if the {@link #allowBlank} validation fails
*/
blankText : 'You must select one item in this group',
//</locale>
// private
defaultType : 'radiofield',
// private
groupCls : Ext.baseCSSPrefix + 'form-radio-group',
getBoxes: function(query) {
return this.query('[isRadio]' + (query||''));
},
checkChange: function() {
var value = this.getValue(),
key = Ext.Object.getKeys(value)[0];
// If the value is an array we skip out here because it's during a change
// between multiple items, so we never want to fire a change
if (Ext.isArray(value[key])) {
return;
}
this.callParent(arguments);
},
<span id='Ext-form-RadioGroup-method-setValue'> /**
</span> * Sets the value of the radio group. The radio with corresponding name and value will be set.
* This method is simpler than {@link Ext.form.CheckboxGroup#setValue} because only 1 value is allowed
* for each name.
*
* @param {Object} value The map from names to values to be set.
* @return {Ext.form.CheckboxGroup} this
*/
setValue: function(value) {
var cbValue, first, formId, radios,
i, len, name;
if (Ext.isObject(value)) {
for (name in value) {
if (value.hasOwnProperty(name)) {
cbValue = value[name];
first = this.items.first();
formId = first ? first.getFormId() : null;
radios = Ext.form.RadioManager.getWithValue(name, cbValue, formId).items;
len = radios.length;
for (i = 0; i < len; ++i) {
radios[i].setValue(true);
}
}
}
}
return this;
}
});
</pre>
</body>
</html>