ExtJS RadioGroup(单选按钮组) 使用及注意事项| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

ExtJS RadioGroup(单选按钮组) 使用及注意事项

## ExtJS RadioGroup(单选按钮组) 使用及注意事项
Ext.form.RadioGroup 用于将一组的RadioBox 进行分组显示， 使用的场景比如： 不同学段（小学， 中学，高中）对应的课程。

### RadioGroup 如何使用 ?
RadioGroup 常使用在 Form中， 作为Form的元素之一。 RadioGroup使用的示例代码如下：
```javascript
{
xtype: 'radiogroup',
fieldLabel: '小学 ',
items: [{
boxLabel: '数学',
name: 'subject',
inputValue: 'math'
}, {
boxLabel: '语文',
name: 'subject',
inputValue: 'chinese'
}]}
```

fieldLabel 定义定义字段标签
使用 items 定义组内的元素
boxLabel， 组内单选框的标签显示
name： 组内单选框元素的名字
inputValue ： 组内单选框对应的值。
注意： 该组内的单选框的name 属性的设置保持一致。
获取值 getValue()
通过 getValue() 获取值， 获取的是选中的那一个单选框的值，值的类型是一个JS的对象，以单选框的名字作为键，以选中的单选框对应的inputValue作为值， 类似： {subject:'chinese'}。
设置值 setValue()
通过setValue() 设置值， 设置值之后对应的单选框会被勾选。 设置值的参数是一个对象类型， 类似：
```javascript
setValue({subject:'chinese'})
```
### 多个 RadioGroup 使用场景
类似本篇开头的场景， 需要达成的效果：
有小学 和 初中等分组
每个分组有多个学科
只能选择一个学段的一个学科。
针对此需求：
所有RadioGroup的name 需要设置相同，比如 sectionSubject
所有的单选框的name 的值必须设置相同，比如 subject
没有单选框的 inputValue 值必须不同， 比如小学语文的该属性可以设置为：primary_chinese
完整的代码类似：
```javascript
Ext.create('Ext.form.Panel', {
defaults: {
labelStyle: 'font-weight:bold'	},
items: [{
xtype: 'radiogroup',
name:'sectionSubject',
fieldLabel: '小学 |',
items: [{
boxLabel: '数学',
name: 'subject',
inputValue: 'primary_math'
}, {
boxLabel: '语文',
name: 'subject',
inputValue: 'primary_chinese'
}]
}, {
xtype: 'radiogroup',
name:'sectionSubject',
fieldLabel: '初中',
items: [{
boxLabel: '数学',
name: 'subject',
inputValue: 'middle_math'
}, {
boxLabel: '语文',
name: 'subject',
inputValue: 'middle_chinese'
}]
}],	tbar: [{
text: 'Get Value',
handler: function (thisBtn) {
var form = thisBtn.findParentByType('form');
alert(Ext.encode(form.getValues()));
}
}, {
text: 'Set Value',
handler: function (thisBtn) {
var form = thisBtn.findParentByType('form');
form.getComponent('myradiogroup').setValue({ subject: 'primary_chinese' });
}
}],renderTo: Ext.getBody()});
```

### 完整示例代码：
https://github.com/osxm/extjs_dev_ency/blob/main/demos/chp03/radioGroup.html

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

ExtJS RadioGroup(单选按钮组) 使用及注意事项

网站导航