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

继上一节内容,我们在表单里加了个一个单选组,一个复选组:

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.效果如下:

转载于:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/23/2559234.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/409733.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[html] 举例说明写一个button的按钮的方法有哪些?

[html] 举例说明写一个button的按钮的方法有哪些&#xff1f; 使用 标签 其值直接写在标签内使用input标签 type为 buttton 值需要通过用 value""的形式写出来个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。…

iou画 yolov3_yolov3环境配置训练及优化

科普gcc/g: - GNU project C and C compiler.When you compile C programs, you should invoke GCC as g instead.Cuda:GPU Accelerated Computing with C and C一、Ubuntucudacudnnopencvdarknet/yolov3环境配置1.NVIDIA显卡驱动安装首先查看系统是否已经安装NVIDIA驱动&#…

第十三章 Perl的面向对象编程

第十三章 Perl的面向对象编程 by flamephoenix 一、模块简介 二、Perl中的类 三、创建类 四、构造函数 实例变量五、方法 六、方法的输出 七、方法的调用 八、重载 九、析构函数 十、继承 十一、方法的重载 十二、Perl类和对象的一些注释 本章介绍如何使用Perl的面向对象编…

python抢票代码_GitHub标星超12K,抢票神器大更新,支持候补

掐指一算&#xff0c;距离国庆黄金周还有半个月的时间!你出行的车票都抢到了吗?图片来自 pexels根据国务院办公厅发布的关于 2019 年部分节假日安排的通知&#xff0c;国庆放假安排是&#xff1a;10 月 1 日至 7 日。想要十一出行的小伙伴们&#xff0c;想必前几天刚经历了一波…

[html]HTML5如何隐藏video元素的控制栏、全屏按钮?

[html]HTML5如何隐藏video元素的控制栏、全屏按钮&#xff1f; 将<video width"800px" height"400px" id"vid" src"a.mp4" controls"controls"> 中的controls"controls"删掉个人简介 我是歌谣&#xff0c…

c语言冒泡排序法程序填空_【C语言】两种方式实现冒泡排序算法

题目要求编写一个C语言程序,实现基本的冒泡排序算法.算法冒泡排序,用一句话来总结:一组数中,相邻的两个数进行比较、交换,将最大(小)数交换至尾(首)部,即完成了一次冒泡排序要想对N个数字进行排序,循环N次即可.如果真的不理解冒泡排序算法,请点击:冒泡排序_360百科核心代码//方…

python 开发板 播放音乐_MicroPython开发板:TPYBoard v102 播放音乐实例

0x00前言 前段时间看到TPYBoard的技术交流群&#xff08;群号&#xff1a;157816561&#xff09;里有人问关于TPYBoard播放音乐的问题。最近抽空看了一下文档介绍&#xff0c;着手做了个实验。 0x01实验器材 TPYBoard v102 开发板 1块 耳机或音响 1个 杜邦线 若干 0x02前期准备…

【转】选择适当的NFC标签类型

来自&#xff1a; Innovision 研究技术有限公司 目录 1. 简介 3 2. NFC的主要应用 4 3. NFC的规定标签类型 5 4. 选择适当的标签 6 5. 小结 11 6. 术语表 12 1. 简介 近场通信(NFC)适用于非常广泛的一系列应用。构建于现有系统和人类行为的基础上&#xff0c;NFC使人们的生活变…

[html] 你知道什么是粘性布局吗?

[html] 你知道什么是粘性布局吗&#xff1f; 中文大概意思&#xff1a; 对象在常态时遵循常规流。它就像是relative和fixed的合体&#xff0c;当在屏幕中时按常规流排版&#xff0c;当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。 个人简介 我是歌…

奥维地图导入西安坐标_奥维地图导入坐标样式 奥维地图批量导入经纬度坐标...

奥维地图坐标导入哪个文件夹&#xff1f;两个办法&#xff1a;  如果想导出到电脑版奥维地图里&#xff0c;可以采用同步到云端再下载到本地的办法解决。如果要作为数据文件保存到电脑里&#xff0c;可以按以下办法操作&#xff1a;  更多——数据管理——导入导出标记——…

kafka streams实战 pdf_spring框架实战口试材料

Spring框架自诞生倚赖从来备受开发者青睐&#xff0c;有人亲切的称之为&#xff1a;Spring 百口桶。它包SpringMVC、SpringBoot、Spring Cloud、Spring Data等处理方案。好多研发职员把spring看作心目中最佳的java项目&#xff0c;没有之一。Spring系列包涵非常多的项目&#x…

RTTI 简明

RTTI(Run-Time Type Identification)并不是什么新的东西,早在1993年,Bjarne Stroustrup已经提出了RTTI的相关的功能建议. 什么是RTTI? 在C 环境中﹐头文件(header file) 含有类之定义(class definition)亦即包含有关类的结构资料(representational information)。但是﹐这…

jquery日期插件_AngularJS 日期时间选择组件(附详细使用方法)

插件简介AngularJS是一款目前非常火的JavaScript脚本库&#xff0c;应用范围十分广阔。今天给大家分享一款基于AngularJS和jQuery的日期时间选择组件&#xff0c;和别的日期选择插件一样&#xff0c;它同样支持年月日的快速定位。另外这款AngularJS日期选择组件还支持时间的选择…

[html] android手机的微信H5弹出的软键盘挡住了文本框,如何解决?

[html] android手机的微信H5弹出的软键盘挡住了文本框&#xff0c;如何解决&#xff1f; window.addEventListener("resize", function () {if (document.activeElement.tagName "INPUT" || document.activeElement.tagName "TEXTAREA") {wind…

SecureCRT 全屏切换

使用 ALTEnter 键进行全屏和取消全屏的切换转载于:https://www.cnblogs.com/flyme/archive/2012/07/04/2575716.html

python知识图谱可视化_知识图谱可视化

## 人物关系知识图谱#### 一、背景将结构化数据通过关系预处理程序处理为图数据库可以查询的数据&#xff0c;示例是将其中一部分(人物关系数据)可视化表示。#### 二、用到的技术技术点&#xff1a;图数据库Neo4j&#xff0c;d3.js&#xff0c;java&#xff0c;css&#xff0c;…

[html] 编写一个布局,让文字环绕在图片的周围

[html] 编写一个布局&#xff0c;让文字环绕在图片的周围 让图片 float 就可以了&#xff0c;如果还想要实现文字圆形环绕图片的效果&#xff0c;可以使用 shape-outside: circle(); 属性个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c;…

[html] input上传文件可以同时选择多张吗?怎么设置?

[html] input上传文件可以同时选择多张吗&#xff1f;怎么设置&#xff1f; <input type"file" multiple />个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关…

My97DatePicker详细说明

js 时间插件 http://www.mysuc.com/test/My97DatePicker/#m311转载于:https://www.cnblogs.com/guyg/archive/2012/07/06/2579623.html

hsv白色h值是多少_ShaderToy系列:HSV

前言这次呢&#xff0c;继续再来看一个iq大神的简单作品&#xff0c;作品虽简单&#xff0c;但是却包含了很多知识点&#xff0c;先放上最终效果&#xff1a;ShaderToy地址&#xff1a;https://www.shadertoy.com/view/MsS3Wc不过本篇改动较大&#xff0c;最终效果与ShaderToy上…