Checkbox与RadioGroup的使用方法

Posted 2021-10-24 上将军

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Checkbox与RadioGroup的使用方法相关的知识，希望对你有一定的参考价值。

rel="File-List" href="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml">

没错！是Checkbox与RadioGroup而不是Checkbox与Radio。

Ex提供的Checkbox与Radio，在控件同名成组时，例如将性别的男与女两个Radio控件都使用sex作为名称时，findField方法只能获取第一个控件，setValue也只能设置第一个控件，这样就造成了如果要使用Form的Load方式加载编辑数据或者用SetValues加载编辑数据时出现问题。要解决这个问题，第一种方法是定义名称不同的控件；第二种方法是控件名称相同，在加载编辑数据时手动处理控件状态。第一种方法对Checkbox问题不是太大，因为各Checkbox之间没关联。但是Radio就不同，彼此间是关联，例如性别选择男了，那女须为未选择状态，这个在名称相同时，会自动处理，不需要写多余代码，但是名称不同，则要通过check事件去修改其它控件的状态。第二种方法存在问题是，Checkbox同名，要获取第一个控件后的控件比较困难，要处理也困难。基于以上原因，笔者习惯的做法是Checkbox使用不同名的定义方法，Radio使用Ext官方论坛用户vtswingkid开发的Ext.ux.RadioGroup扩展代替。

Ext.ux.RadioGroup在的下载地址是：http://extjs.com/forum/showthread.php?t=23250。

Checkbox在定义时必须使用ColumnLayout，第一列的控件有标签，后续列的控件则隐藏标签。不然，会很难实现习惯的Checkbox对齐方式。Ext.ux.RadioGroup在扩展的同时已经处理好对齐问题了，所以不必象Checkbox那样使用ColumnLayout。

Checkbox的主要配置参数请看表1。

表1 Checkbox主要配置参数
配置参数	描述
boxLabel	在复选框后显示的文本
checked	值为true表示初始状态为已选，false则表示未选，默认值是false
disabled	值为true表示初始状态为禁止使用，false则表示可以使用，默认值是false
fieldLabel	控件标签
hideLabel	值为true表示隐藏标签，false则显示，默认值是true
labelSeparator	标签分隔符
inputValue	Checkbox的实际提交值。如果不设置该值，无论value设置为什么值，Checkbox提交值都为“on”，
msgTarget	错误信息显示位置，默认值是qtip，详细信息请看Form校验与错误信息显示一节
name	控件名称
readOnly	值为true则表示初始状态为只读，false则表示可写，默认值为false，不推荐使用该值设置只读，因为设置后不允许再修改，如果要设置只读属性，请参考本书第7章编辑控件只读插件一节
tabIndex	键盘tab键移动时的索引

Ext.ux.RadioGroup的主要配置参数请看表2。

表2 Ext.ux.RadioGroup主要配置参数
配置参数	描述
fieldLabel	控件标签
name	控件名称
horizontal	值为true则表示Radio选项水平排列，false则表示垂直排列，默认值为false
radios	Radio选项组成的数组
radios子项配置：value	Radio选项正式值
radios子项配置：checked	值为true则表示已选，false则表示未选，默认值是false
radios子项配置：boxLabel	在单选框后显示的文本

Checkbox与RadioGroup的使用方法请看例子：

<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Checkbox与RadioGroup例子</title>

<style>

</style>

</head>

<body>

<h1 style="margin:20px 0px 0px 20px;">第4章 Checkbox与RadioGroup例子</h1>

<br />

<p>

</p>

<br />

</div>

var app={};

Ext.onReady(function(){

var frm = new Ext.form.FormPanel({

applyTo: "form1",

autoHeight: true,

width: 860,

height:300,

frame: true,

labelWidth:80,

labelSeparator:"：",

title:'Checkbox与RadioGroup例子',

items:[

{layout:'column',border:false,items:[

{columnWidth:.5,layout: 'form',border:false,items: [

{xtype:'fieldset',title:'控件名不同',height:110,items:[

{layout:'column',border:false,items:[

{columnWidth:.5,layout: 'form',border:false,items: [

{xtype:'checkbox',fieldLabel:'角色',boxLabel:'系统管理员',name:'role1',anchor:'100%'}

]},

{columnWidth:.25,layout: 'form',border:false,items: [

{xtype:'checkbox',hideLabel:true,boxLabel:'经理',name:'role2',anchor:'100%'}

]},

{columnWidth:.25,layout: 'form',border:false,items: [

{xtype:'checkbox',hideLabel:true,boxLabel:'普通用户',name:'role3',anchor:'100%'}

]}

]},

{layout:'column',border:false,items:[

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'button',text:'选择“系统管理员”',scope:this,

handler:function(){

frm.form.findField('role1').setValue('true');

Ext.get('op').dom.value+="执行：frm.form.findField('role1').setValue('true')/n";

}

]},

{columnWidth:.4,layout: 'form',border:false,items: [

{xtype:'button',text:'不选择“系统管理员”',scope:this,

handler:function(){

frm.form.findField('role1').setValue('false');

Ext.get('op').dom.value+="执行：frm.form.findField('role1').setValue('false')/n";

}

]},

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'button',text:'选择“经理”',scope:this,

handler:function(){

frm.form.findField('role2').setValue('true');

Ext.get('op').dom.value+="执行：frm.form.findField('role2').setValue('true')/n";

}

]}

]},

{layout:'column',border:false,items:[

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'button',text:'不选择“经理”',scope:this,

handler:function(){

frm.form.findField('role2').setValue('false');

Ext.get('op').dom.value+="执行：frm.form.findField('role2').setValue('false')/n";

}

]},

{columnWidth:.4,layout: 'form',border:false,items: [

{xtype:'button',text:'选择“普通用户”',scope:this,

handler:function(){

frm.form.findField('role3').setValue('true');

Ext.get('op').dom.value+="执行：frm.form.findField('role3').setValue('true')/n";

}

]},

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'button',text:'不选择“普通用户”',scope:this,

handler:function(){

frm.form.findField('role3').setValue('false');

Ext.get('op').dom.value+="执行：frm.form.findField('role3').setValue('false')/n";

}

]}

]},

{columnWidth:.5,bodyStyle:'padding: 0 0 0 5px',layout:'form',border:false,items: [

{xtype:'fieldset',title:'控件名相同',height:110,items:[

{layout:'column',border:false,items:[

{columnWidth:.5,layout: 'form',border:false,items: [

{xtype:'checkbox',fieldLabel:'角色2',boxLabel:'系统管理员',name:'role',anchor:'90%',inputValue:"系统管理员"}

]},

{columnWidth:.25,layout: 'form',border:false,items: [

{xtype:'checkbox',hideLabel:true,boxLabel:'经理',name:'role',anchor:'90%',inputValue:"经理"}

]},

{columnWidth:.25,layout: 'form',border:false,items: [

{xtype:'checkbox',hideLabel:true,boxLabel:'普通用户',name:'role',anchor:'90%',inputValue:"普通用户"}

]}

]},

{layout:'column',border:false,items:[

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'button',text:'findField("role")',scope:this,

handler:function(){

var obj=frm.form.findField('role');

Ext.get('op').dom.value+="执行：var obj=frm.form.findField('role')/n"+

'obj.inputValue：'+obj.inputValue+'/n';

}

]},

{columnWidth:.4,layout: 'form',border:false,items: [

{xtype:'button',text:"setValue('true')",scope:this,

handler:function(){

frm.form.findField('role').setValue('true');

Ext.get('op').dom.value+="执行：frm.form.findField('role').setValue('true')/n";

}

]},

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'button',text:"setValue('false')",scope:this,

handler:function(){

Android——RadioGroup和CheckBox

Android攻城狮CheckBox&RadioGroup&AutoCompleteTextView&MultiAutoCompleteTextView&ToggleB

RadioButton和CheckBox

RadioButton与CheckBox

android学习之RadioButton和CheckBox