无废话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) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
随机推荐
- (原创)android中使用相机的两种方式
在社交类应用或扫描二维码的场合都需要用到手机上的摄像头 在程序中启用这一硬件主要有两类方法 1.发送intent启动系统自带的摄像应用 此应用的AndroidManifest中的intent-filt ...
- 4 Handler相关类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. Handler相关类概述 处理程序相关类一共有三个,其没有派生继承关系,但是其有友元关系和使用关系 ...
- python自动化之装饰器
1 高阶函数 满足下列条件之一就可成函数为高阶函数 某一函数当做参数传入另一个函数中 函数的返回值包含n个函数,n>0 高阶函数示范 def bar(): print 'in the bar' ...
- java.lang.ClassNotFoundException: net.sf.json.JSONArray,java.lang.NoClassDefFoundError: net/sf/json/JSONArray jetty跑项目遇到的问题
2016-05-18 15:44:25 ERROR Dispatcher.error[user:|url:]:L38 - Dispatcher initialization failed Unable ...
- rest api设计的一般原则
本文参考自:http://www.ruanyifeng.com/blog/2014/05/restful_api.html,http://www.dongming8.cn/?p=590 服务器端: 1 ...
- jQuery工作原理
jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的.从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库.jQuery改变ja ...
- mac os x安装php7.0和phalcon3.0
1,安装xampp(with php7.0) 下载地址: https://www.apachefriends.org/download.html 2,安装phalcon3.0 cd ~/git clo ...
- 【GoLang】GoLang 错误处理 -- 异常处理思路示例
代码: package main import ( "fmt" // "testing" ) var Pkg = "packageName" ...
- POJ 1190(深搜)
http://poj.org/problem?id=1190 又有好久没做搜索的题了,没想到做一个卡了我那么久,想哭啊. 一个中文题,思路呢也就是搜索呗,一层一层往上面搜,不过这里有两个比较重要的地方 ...
- Unity3d《Shader篇》自定义光照模型
一.理论 公式1:被光照的物体最终所呈现的颜色公式 最终颜色=材质颜色*发光颜色 公式2:材质颜色 tex2D(_MainTex,uv) 公式3:光照颜色 光照颜色=自发光+环境光+漫反射+镜面反射 ...