没错!是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。
Ext.ux.RadioGroup的主要配置参数请看表2。
Ext.ux.RadioGroup的主要配置参数请看表2。
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html debug='true'>
- <head>
- <title>Checkbox与RadioGroup例子</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
- <script type="text/javascript" src="../lib/ext/ext-base.js"></script>
- <script type="text/javascript" src="../lib/ext/ext-all.js"></script>
- <script type="text/javascript" src="../lib/ext/radiogroup.js"></script>
- <script type="text/javascript" src="../lib/ext/locale/ext-lang-zh_CN.js"></script>
- <style>
- </style>
- </head>
- <body>
- <h1 style="margin:20px 0px 0px 20px;">第4章 Checkbox与RadioGroup例子</h1>
- <br />
- <div style="padding-left:20px;">
- <p>
- <div id="form1"></div><br>
- <div >执行操作:</div>
- <textarea id='op' rows="10" style="width:800px;"></textarea>
- </p>
- <br />
- </div>
- <script>
- 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(){
- frm.form.findField('role').setValue('false');
- Ext.get('op').dom.value+="执行:frm.form.findField('role').setValue('false')/n";
- }
- }
- ]}
- ]}
- ]}
- ]}
- ]},
- {xtype:'fieldset',title:'RadioGroup',height:60,items:[
- {layout:'column',border:false,items:[
- {columnWidth:.3,layout: 'form',border:false,items: [
- {xtype:'ux-radiogroup',
- fieldLabel:'性别',
- name:'sex',
- horizontal:true,
- radios:[{
- value:'男',
- checked:true,
- boxLabel:'男'
- }, {
- value:'女',
- boxLabel:'女'
- }]
- }
- ]},
- {columnWidth:.3,layout: 'form',border:false,items: [
- {xtype:'button',text:"setValue('男')",scope:this,
- handler:function(){
- frm.form.findField('sex').setValue('男');
- Ext.get('op').dom.value+="执行:frm.form.findField('sex').setValue('男')/n";
- }
- }
- ]},
- {columnWidth:.3,layout: 'form',border:false,items: [
- {xtype:'button',text:"setValue('女')",scope:this,
- handler:function(){
- frm.form.findField('sex').setValue('女');
- Ext.get('op').dom.value+="执行:frm.form.findField('sex').setValue('女')/n";
- }
- }
- ]}
- ]}
- ]},
- {layout:'column',border:false,items:[
- {columnWidth:.5,layout: 'form',border:false,items: [
- {xtype:'button',text:"form.setValues({role1:true,role:true,sex:'男'})",scope:this,
- handler:function(){
- frm.form.setValues({role1:true,role:true,sex:'男'});
- Ext.get('op').dom.value+="执行:frm.form.setValues({role1:true,role:true,sex:'男'})/n";
- }
- }
- ]},
- {columnWidth:.5,layout: 'form',border:false,items: [
- {xtype:'button',text:"form.getValues()",scope:this,
- handler:function(){
- Ext.get('op').dom.value+="执行:frm.form.getValues()/n"
- +'结果:'+Ext.encode(frm.form.getValues())+'/n';
- }
- }
- ]}
- ]}
- ],
- buttons: [{
- text: '保存',
- scope:this,
- handler:function(){
- if(frm.form.isValid()){
- frm.form.doAction('submit',{
- url:'form.ashx',
- method:'post',
- params:'',
- success:function(form,action){
- Ext.Msg.alert('操作',action.result.data);
- },
- failure:function(){
- //Ext.Msg.alert('操作','保存失败!');
- }
- });
- }
- }
- },{
- text: '取消',
- scope:this,
- handler:function(){frm.form.reset();}
- }]
- });
- })
- </script>
- </body>
- </html>
例子的运行结果如图1。
从图中可以看到定义了2组Checkbox与一组RadioGroup,并设置了相应的测试按钮,在执行操作多行文本框内可以了解各按钮执行的操作以及一些结果。
第1组定义了“role1”、“role2”和“role3”3个不同名称的Checkbox,可顺利通过findField方法找到控件,然后通过setValue方法设置复选框的状态。控制复选框的状态有多种值选择,设置为已选的值有true、on或value配置参数设置的值,但是不能使用inputValue配置参数设置的值,设置为未选的值有false、off或空。
第2组定义了3个名称相同的Checkbox,通过findField(“role”)按钮可测试通过findField方法找到的控件是那一个,其结果如下:
执行:var obj=frm.form.findField('role')
obj.inputValue:系统管理员
从结果中可以了解到它查找出来的不是数组,只是第1个Checkbox。
再单击两个setValue按钮可以了解到通过findField方法找到控件后再使用setValue方法只能设置第1个Checkbox的状态,因为findField方法找到的是第1个Checkbox。
看看RadioGroup的定义方法:
- {xtype:'ux-radiogroup',
- fieldLabel:'性别',
- name:'sex',
- horizontal:true,
- radios:[{
- value:'男',
- checked:true,
- boxLabel:'男'
- }, {
- value:'女',
- boxLabel:'女'
- }]
- }
相当简单。RadioGroup的标签为性别,名称为sex,单选按钮水平排列,radios里定义了两个单选按钮,第1个的值为男,初始状态为已选,显示文本为男,第2个的值是女,显示文本为女。通过两个setValue按钮,可测试setValue方法将value配置的值作为参数传递就可以设置那个单选按钮为已选状态了。
frm.form.setValues({role1:true,role:true,sex:'男'})
|
执行:frm.form.getValues() 结果:{"role1":"on","role3":"on","role":["经理","普通用户"],"sex":"女"} |