无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
extjs技术交流，欢迎加群（338456177）：
继上一节内容，我们在表单里加了个一个单选组，一个复选组:
1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架开始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10 <!--ExtJs框架结束--> 11 <style type="text/css"> 12 .x-form-unit 13 { 14 height: 22px; 15 line-height: 22px; 16 padding-left: 2px; 17 display: inline-block; 18 display: inline; 19 } 20 </style> 21 <script type="text/javascript"> 22 23 Ext.override(Ext.form.TextField, { 24 unitText: '', 25 onRender: function (ct, position) { 26 Ext.form.TextField.superclass.onRender.call(this, ct, position); 27 // 如果单位字符串已定义 则在后方增加单位对象 28 if (this.unitText != '') { 29 this.unitEl = ct.createChild({ 30 tag: 'div', 31 html: this.unitText 32 }); 33 this.unitEl.addClass('x-form-unit'); 34 // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况 35 this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2); 36 // 同时修改错误提示图标的位置 37 this.alignErrorIcon = function () { 38 this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]); 39 }; 40 } 41 } 42 }); 43 44 Ext.onReady(function () { 45 //初始化标签中的Ext:Qtip属性。 46 Ext.QuickTips.init(); 47 Ext.form.Field.prototype.msgTarget = 'side'; 48 49 //提交按钮处理方法 50 var btnsubmitclick = function () { 51 Ext.MessageBox.alert('提示', '你点了确定按钮!'); 52 } 53 //重置按钮"点击时"处理方法 54 var btnresetclick = function () { 55 Ext.MessageBox.alert('提示', '你点了重置按钮!'); 56 } 57 //重置按钮"鼠标悬停"处理方法 58 var btnresetmouseover = function () { 59 Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!'); 60 } 61 //提交按钮 62 var btnsubmit = new Ext.Button({ 63 text: '提交', 64 handler: btnsubmitclick 65 }); 66 //重置按钮 67 var btnreset = new Ext.Button({ 68 text: '重置', 69 listeners: { 70 'mouseover': btnresetmouseover, 71 'click': btnresetclick 72 } 73 }); 74 //用户名input 75 var txtusername = new Ext.form.TextField({ 76 width: 140, 77 allowBlank: false, 78 maxLength: 20, 79 name: 'username', 80 fieldLabel: '用户名称', 81 blankText: '请输入用户名', 82 maxLengthText: '用户名不能超过20个字符' 83 }); 84 //密码input 85 var txtpassword = new Ext.form.TextField({ 86 width: 140, 87 allowBlank: false, 88 maxLength: 20, 89 inputType: 'password', 90 name: 'password', 91 fieldLabel: '密码', 92 blankText: '请输入密码', 93 maxLengthText: '密码不能超过20个字符' 94 }); 95 var numberfield = new Ext.form.NumberField({ 96 fieldLabel: '身高', 97 width: 80, 98 decimalPrecision: 1, 99 minValue: 0.01, 100 maxValue: 200, 101 unitText: ' cm', 102 allowBlank: false, 103 blankText: '请输入身高' 104 }); 105 106 var hiddenfield = new Ext.form.Hidden({ 107 name: 'userid', 108 value: '1' 109 }); 110 111 var datefield = new Ext.form.DateField({ 112 fieldLabel: '出生日期', 113 format: 'Y-m-d', 114 editable: false, 115 allowBlank: false, 116 blankText: '请选择日期' 117 }); 118 //----------------------单选组开始----------------------// 119 var radiogroup = new Ext.form.RadioGroup({ 120 fieldLabel: '性别', 121 width: 100, 122 items: [{ 123 name: 'sex', 124 inputValue: '0', 125 boxLabel: '男', 126 checked: true 127 }, { 128 name: 'sex', 129 inputValue: '1', 130 boxLabel: '女' 131 }] 132 }); 133 //获取单选组的值 134 radiogroup.on('change', function (rdgroup, checked) { 135 alert(checked.getRawValue()); 136 }); 137 //----------------------单选组结束----------------------// 138 //----------------------复选组开始----------------------// 139 var checkboxgroup = new Ext.form.CheckboxGroup({ 140 fieldLabel: '兴趣爱好', 141 width: 170, 142 items: [{ 143 boxLabel: '看书', 144 inputValue: '0' 145 }, { 146 boxLabel: '上网', 147 inputValue: '1' 148 }, { 149 boxLabel: '听音乐', 150 inputValue: '2' 151 }] 152 }); 153 //获取复选组的值 154 checkboxgroup.on('change', function (cbgroup, checked) { 155 for (var i = 0; i < checked.length; i++) { 156 alert(checked[i].getRawValue()); 157 } 158 }); 159 //----------------------复选组结束----------------------// 160 //表单 161 var form = new Ext.form.FormPanel({ 162 frame: true, 163 title: '表单标题', 164 style: 'margin:10px', 165 html: '<div style="padding:10px">这里表单内容</div>', 166 items: [txtusername, txtpassword, numberfield, hiddenfield, datefield, radiogroup, checkboxgroup], 167 buttons: [btnsubmit, btnreset] 168 }); 169 //窗体 170 var win = new Ext.Window({ 171 title: '窗口', 172 width: 476, 173 height: 374, 174 html: '<div>这里是窗体内容</div>', 175 resizable: true, 176 modal: true, 177 closable: true, 178 maximizable: true, 179 minimizable: true, 180 buttonAlign: 'center', 181 items: form 182 }); 183 win.show(); 184 }); 185 </script> 186 </head> 187 <body> 188 <!-- 189 说明： 190 (1)var radiogroup = new Ext.form.RadioGroup():创建一个新的单选按钮组。 191 (2)name: 'sex'：单选按钮组是按照 name 属性来区分的，同一组中的单选按钮才能单选， 192 如果name属性设置错误，该按钮将会被认为是其他组。 193 (3)inputValue: '0'：选择框的值。 194 (4)boxLabel: '男':选择框后面的文字说明。 195 (5)checked.getRawValue()：获取选择框的选中值，由于单选框只有一个选中值，可以直接获取， 196 而复选框可以多选，所以要循环取出。 197 --> 198 </body> 199 </html>
2.效果如下：
![无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]_第1张图片](http://img.e-com-net.com/image/product/020676680bf9445f8ec69ad4f0abfa23.jpg)