无废话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.效果如下：
无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]的更多相关文章
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 34.无废话ExtJs 入门教程十八[树：TreePanel]
转自:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/28/2566350.html 1. <!DOCTYPE html PUBLIC ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十一[下拉列表：Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
随机推荐
- 如何用Wireshark捕获USB数据？
现在越来越多的电子设备采用USB接口进行通讯,通讯标准也在逐步提高.那么,我们就会好奇这些设备是如何工作的?而无论你是一个硬件黑客,业余爱好者或者只是对它有一点兴趣的,USB对我们都是具有挑战性的. ...
- 简单的哈希表实现 C语言
简单的哈希表实现 简单的哈希表实现 原理 哈希表和节点数据结构的定义 初始化和释放哈希表 哈希散列算法 辅助函数strDup 哈希表的插入和修改 哈希表中查找 哈希表元素的移除 哈希表打印 测试一下 ...
- NSOperation
自定义operation 相比GCD,可以中断任务,也可使用 addDependency,对要执行的任务进行排序.. // // CustomOperation.h // Test // // Cre ...
- ndk学习7: 使用静态库
目录: 手工编译静态库 ndk-build编译静态库 手工编译静态库 老规矩还是先手工操作,知其然并知其所以然 需要用到的核心命令: gcc –g –c mod1.c mod2.c mod3. ...
- POJ 3414
http://poj.org/problem?id=3414 这是一个广搜的题目,不难,就是有些许麻烦.对于练习还是个不错的题目. 题意就是给你两个杯子,这两个杯子的容量分别为a和b,要你通过一些操作 ...
- (转)高性能网站架构之缓存篇—Redis集群搭建
看过 高性能网站架构之缓存篇--Redis安装配置和高性能网站架构之缓存篇--Redis使用配置端口转发 这两篇文章的,相信你已经对redis有一定的了解,并能够安装上,进行简单的使用了,但是在咱们的 ...
- c++ macro
C++ Code 12345678910111213141516171819202122232425262728293031 /* version: 1.0 author: hellogise ...
- Tomcat内存溢出(java.lang.OutOfMemoryError: PermGen space)
Tomcat启动时报如下错误: java.lang.OutOfMemoryError: PermGen space 解决办法: 配置相关内存大小.其中按照启动tomcat的不同方式,分 ...
- MyEclipse8.5可用注册码(到2018年)
转载自:http://blog.csdn.net/z123252520/article/details/45873159 Subscriber:zy Subscriber Code:mLR8ZC-85 ...
- Android Volley入门到精通：定制自己的Request
经过前面两篇文章的学习,我们已经掌握了Volley各种Request的使用方法,包括StringRequest.JsonRequest.ImageRequest等.其中StringRequest用于请 ...