已完本玄幻小说排行榜_ExtJS RadioGroup(單選按鈕組) 使用及注意事項| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

ExtJS RadioGroup(單選按鈕組) 使用及注意事項

## ExtJS RadioGroup(單選按鈕組) 使用及注意事項
Ext.form.RadioGroup 用于將一組的RadioBox 進(jìn)行分組顯示， 使用的場(chǎng)景比如： 不同學(xué)段（小學(xué)， 中學(xué)，高中）對應的課程。

### RadioGroup 如何使用 ?
RadioGroup 常使用在 Form中， 作為Form的元素之一。 RadioGroup使用的示例代碼如下：
```javascript
{
xtype: 'radiogroup',
fieldLabel: '小學(xué) ',
items: [{
boxLabel: '數學(xué)',
name: 'subject',
inputValue: 'math'
}, {
boxLabel: '語(yǔ)文',
name: 'subject',
inputValue: 'chinese'
}]}
```

fieldLabel 定義定義字段標簽
使用 items 定義組內的元素
boxLabel， 組內單選框的標簽顯示
name： 組內單選框元素的名字
inputValue ： 組內單選框對應的值。
注意： 該組內的單選框的name 屬性的設置保持一致。
獲取值 getValue()
通過(guò) getValue() 獲取值， 獲取的是選中的那一個(gè)單選框的值，值的類(lèi)型是一個(gè)JS的對象，以單選框的名字作為鍵，以選中的單選框對應的inputValue作為值， 類(lèi)似： {subject:'chinese'}。
設置值 setValue()
通過(guò)setValue() 設置值， 設置值之后對應的單選框會(huì )被勾選。 設置值的參數是一個(gè)對象類(lèi)型， 類(lèi)似：
```javascript
setValue({subject:'chinese'})
```
### 多個(gè) RadioGroup 使用場(chǎng)景
類(lèi)似本篇開(kāi)頭的場(chǎng)景， 需要達成的效果：
有小學(xué) 和 初中等分組
每個(gè)分組有多個(gè)學(xué)科
只能選擇一個(gè)學(xué)段的一個(gè)學(xué)科。
針對此需求：
所有RadioGroup的name 需要設置相同，比如 sectionSubject
所有的單選框的name 的值必須設置相同，比如 subject
沒(méi)有單選框的 inputValue 值必須不同， 比如小學(xué)語(yǔ)文的該屬性可以設置為：primary_chinese
完整的代碼類(lèi)似：
```javascript
Ext.create('Ext.form.Panel', {
defaults: {
labelStyle: 'font-weight:bold'	},
items: [{
xtype: 'radiogroup',
name:'sectionSubject',
fieldLabel: '小學(xué) |',
items: [{
boxLabel: '數學(xué)',
name: 'subject',
inputValue: 'primary_math'
}, {
boxLabel: '語(yǔ)文',
name: 'subject',
inputValue: 'primary_chinese'
}]
}, {
xtype: 'radiogroup',
name:'sectionSubject',
fieldLabel: '初中',
items: [{
boxLabel: '數學(xué)',
name: 'subject',
inputValue: 'middle_math'
}, {
boxLabel: '語(yǔ)文',
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

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

ExtJS RadioGroup(單選按鈕組) 使用及注意事項

網(wǎng)站導航