RadioGroup.js
4.65 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
/**
* 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',
/**
* @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.
*/
/**
* @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>
/**
* @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);
},
/**
* 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;
}
});