无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
前面我们共介绍过10种表单组件，这些组件是我们在开发过程中最经常用到的，所以一定要用到非常熟练才可以，今天我们会通过一个员工信息表实例，再把这些组件串一下。
(1)TextField (2)Botton (3)NumberField (4)Hidden (5)DataFiedl (6)RadioGroup (7)CheckBoxGroup (8)Combobox (9)File (10)Editor
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 <style type="text/css">
11 .x-form-unit
12 {
13 height: 22px;
14 line-height: 22px;
15 padding-left: 2px;
16 display: inline-block;
17 display: inline;
18 }
19 </style>
20 <!--ExtJs框架结束-->
21 <script type="text/javascript">
22
23 //----------------------重写文本框开始----------------------//
24 Ext.override(Ext.form.TextField, {
25 unitText: '',
26 onRender: function (ct, position) {
27 Ext.form.TextField.superclass.onRender.call(this, ct, position);
28 // 如果单位字符串已定义 则在后方增加单位对象
29 if (this.unitText != '') {
30 this.unitEl = ct.createChild({
31 tag: 'div',
32 html: this.unitText
33 });
34 this.unitEl.addClass('x-form-unit');
35 // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况
36 this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);
37 // 同时修改错误提示图标的位置
38 this.alignErrorIcon = function () {
39 this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]);
40 };
41 }
42 }
43 });
44 //----------------------重写文本框结束----------------------//
45
46 Ext.onReady(function () {
47 //初始化标签中的Ext:Qtip属性。
48 Ext.QuickTips.init();
49 Ext.form.Field.prototype.msgTarget = 'side';
50
51 //------------第一列内容开始-------------//
52 //姓名
53 var txtusername = new Ext.form.TextField({
54 width: 130,
55 allowBlank: false,
56 maxLength: 4,
57 name: 'username',
58 fieldLabel: '姓名',
59 blankText: '请输入姓名',
60 maxLengthText: '姓名不能超过4个字符'
61 });
62 //政治面貌数据源
63 var combostore = new Ext.data.ArrayStore({
64 fields: ['id', 'name'],
65 data: [[1, '团员'], [2, '党员'], [3, '其他']]
66 });
67 //政治面貌下拉列表
68 var cobpolitical = new Ext.form.ComboBox({
69 width: 130,
70 allowBlank: false,
71 fieldLabel: '政治面貌',
72 store: combostore,
73 displayField: 'name',
74 valueField: 'id',
75 triggerAction: 'all',
76 emptyText: '请选择...',
77 blankText: '请选择政治面貌',
78 editable: false,
79 mode: 'local'
80 });
81 //毕业院校
82 var txtgraduateschool = new Ext.form.TextField({
83 width: 130,
84 allowBlank: false,
85 maxLength: 10,
86 name: 'graduateschool',
87 fieldLabel: '毕业院校',
88 blankText: '请输入毕业院校',
89 maxLengthText: '毕业院校不能超过10个字符'
90 });
91 //通信地址
92 var txtaddress = new Ext.form.TextField({
93 width: 130,
94 allowBlank: false,
95 maxLength: 30,
96 name: 'address',
97 fieldLabel: '通信地址',
98 blankText: '请输入通信地址',
99 maxLengthText: '通信地址不能超过30个字符'
100 });
101 //第一列包含4行
102 var column1 = {
103 columnWidth: .28,
104 layout: 'form',
105 items: [
106 txtusername, cobpolitical, txtgraduateschool, txtaddress
107 ]
108 };
109 //------------第一列内容结束-------------//
110 //------------第二列内容开始-------------//
111 //性别
112 var rdosex = new Ext.form.RadioGroup({
113 fieldLabel: '性别',
114 width: 130,
115 style: 'padding-top:3px;height:17px;',
116 items: [{ name: 'sex', inputValue: '0', boxLabel: '男', checked: true }, { name: 'sex', inputValue: '1', boxLabel: '女'}]
117 });
118 //身高
119 var numheight = new Ext.form.NumberField({
120 fieldLabel: '身高',
121 width: 117,
122 decimalPrecision: 0,
123 minValue: 1,
124 maxValue: 400,
125 name: 'height',
126 unitText: ' cm',
127 allowBlank: false,
128 blankText: '请输入身高'
129 });
130 //毕业专业
131 var txtprofessional = new Ext.form.TextField({
132 width: 130,
133 allowBlank: false,
134 maxLength: 30,
135 name: 'professional',
136 fieldLabel: '毕业专业',
137 blankText: '请输入毕业专业',
138 maxLengthText: '毕业专业不能超过30个字符'
139 });
140 //联系电话
141 var txtphone = new Ext.form.TextField({
142 width: 130,
143 allowBlank: false,
144 maxLength: 20,
145 name: 'phone',
146 fieldLabel: '联系电话',
147 blankText: '请输入联系电话',
148 maxLengthText: '联系电话不能超过20个字符'
149 });
150 //第二列包含4行
151 var column2 = {
152 columnWidth: .28,
153 layout: 'form',
154 items: [rdosex, numheight, txtprofessional, txtphone]
155 };
156 //------------第二列内容结束-------------//
157 //------------第三列内容开始-------------//
158 //年龄
159 var numage = new Ext.form.NumberField({
160 fieldLabel: '年龄',
161 width: 117,
162 decimalPrecision: 0,
163 minValue: 1,
164 maxValue: 60,
165 name: 'age',
166 unitText: ' 岁',
167 allowBlank: false,
168 blankText: '请输入年龄'
169 });
170 //体重
171 var numweight = new Ext.form.NumberField({
172 fieldLabel: '体重',
173 width: 117,
174 decimalPrecision: 0,
175 minValue: 1,
176 maxValue: 300,
177 name: 'age',
178 unitText: ' kg',
179 allowBlank: false,
180 blankText: '请输入体重'
181 });
182 //毕业日期
183 var dategraduation = new Ext.form.DateField({
184 fieldLabel: '毕业日期',
185 name: 'graduationdate',
186 width: 117,
187 format: 'Y-m-d',
188 editable: false,
189 allowBlank: false,
190 blankText: '请选择毕业日期'
191 });
192 //第三列包含3行
193 var column3 = {
194 columnWidth: .25,
195 layout: 'form',
196 items: [numage, numweight, dategraduation]
197 };
198 //------------第三列内容结束-------------//
199 //------------第四列内容开始-------------//
200 //创建div组件
201 var imagebox = new Ext.BoxComponent({
202 autoEl: {
203 style: 'width:65px;height:60px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:10px;margin-bottom:8px',
204 tag: 'div',
205 id: 'imageshow',
206 html: '暂无相片'
207 }
208 });
209 var uploadbutton = new Ext.Button({
210 text: '上传相片',
211 style: 'margin:0px auto;',
212 handler: function () {
213 alert('弹出新窗体上传相片!');
214 }
215 });
216 var column4 = {
217 columnWidth: .16,
218 layout: 'form',
219 items: [imagebox, uploadbutton]
220 };
221 //------------第四列内容结束-------------//
222 //招聘来源
223 var checksource = new Ext.form.CheckboxGroup({
224 fieldLabel: '招聘来源',
225 style: 'padding-top:3px;height:17px;',
226 items: [{
227 boxLabel: '报纸招聘',
228 inputValue: '0'
229 }, {
230 boxLabel: '校园招聘',
231 inputValue: '1'
232 }, {
233 boxLabel: '人才市场',
234 inputValue: '2'
235 }, {
236 boxLabel: '招聘网站',
237 inputValue: '3'
238 }]
239 });
240 //创建文本上传域
241 var exteditor = new Ext.form.HtmlEditor({
242 fieldLabel: '其他信息',
243 width: 745,
244 height: 320
245 });
246 //表单
247 var form = new Ext.form.FormPanel({
248 frame: true,
249 title: '员工信息表',
250 style: 'margin:10px',
251 labelWidth: 70,
252 buttonAlign: 'center',
253 items: [{
254 layout: 'column',
255 items: [
256 column1,
257 column2,
258 column3,
259 column4
260 ]
261 }, checksource,
262 exteditor
263 ],
264 buttons: [{
265 text: '保存',
266 handler: function () { alert('保存方法!') }
267 }, {
268 text: '重置',
269 handler: function () { alert('重置方法!') }
270 }]
271 });
272 //窗体
273 var win = new Ext.Window({
274 title: '窗口',
275 width: 900,
276 height: 580,
277 resizable: true,
278 modal: true,
279 closable: true,
280 maximizable: true,
281 minimizable: true,
282 buttonAlign: 'center',
283 items: form
284 });
285 win.show();
286
287 });
288 </script>
289 </head>
290 <body>
291 <!--
292 说明：
293 (1)254行layout: 'column'：以列的方式布局，这里总共分了4列，布局的内容下个教程讲解。
294 -->
295 </body>
296 </html>
2.效果如下：
无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]的更多相关文章
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] 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 入门教程五[文本框：TextField]
无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
随机推荐
- linux 权限操作
添加用户 命令格式:useradd 选项 用户名 -g 缺省组(不写则默认为用户名组) -G 所属组(添加到多个用户组,逗号隔开) -c 描述信息 -d 指定家目录 useradd –g aa bb ...
- 2016年10月16日--ArrayList集合、特殊集合
ArrayList集合 使用前引用 using System.Collections; ArrayList集合 实例化.初始化 ArrayList al = new ArrayList(); Arra ...
- HDU 4707 DFS
Problem Description One day, Lin Ji wake up in the morning and found that his pethamster escaped. He ...
- 13 HashTable抽象哈希表类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...
- HTTP协议详解篇（待续）
1.工作流程 HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: (1)建立TCP连接 在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务 ...
- HTTP协议概念篇
1.概念 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器. ...
- 中文的加密传输（python版）
信息传输过程中,可能会被各种监听. 这里介绍一种简单的加密算法(可逆). 正向加密: 字符串 -> 字节(char->int转换) -> 异或每个字节某个KEY ->字节(i ...
- EXTJS 动态改变Gird 列值
var me = this.getView('EditProProductQrcodePanel'); var grid = me.down("[name=mallQrcodeGrid] ...
- discuzX3后台管理插件开发示例一 用户表查询
上次的入门已经介绍了后台管理插件开发的基本步骤,下面简单写一个示例查询一下用户表 需要已完成以下操作: 1.已创建test后台管理插件 //详见 http://www.cnblogs.com/savo ...
- 手动fsck修复
[转自]http://blog.chinaunix.net/uid-26719405-id-3781541.html 由于硬盘常年读写,系统会造成系统文件损坏,导致重启后无法登陆到系统, fsck不仅 ...