无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]

来源：互联网发布：英伟达超频软件编辑：程序博客网时间：2024/05/22 16:48
继上一节内容，我们在表单里加了个一个单选组，一个复选组:
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: true127                 }, {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: form182             });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.效果如下：
阅读全文
0 0