无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]
继上第六节内容，我们在表单里加了个一个数字字段，隐藏字段，日期字段。如下代码所:
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><!--中文翻译js-->
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
45 Ext.onReady(function () {
46 //初始化标签中的Ext:Qtip属性。
47 Ext.QuickTips.init();
48 Ext.form.Field.prototype.msgTarget = 'side';
49
50 //提交按钮处理方法
51 var btnsubmitclick = function () {
52 Ext.MessageBox.alert('提示', '你点了确定按钮!');
53 }
54 //重置按钮"点击时"处理方法
55 var btnresetclick = function () {
56 Ext.MessageBox.alert('提示', '你点了重置按钮!');
57 }
58 //重置按钮"鼠标悬停"处理方法
59 var btnresetmouseover = function () {
60 Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!');
61 }
62 //提交按钮
63 var btnsubmit = new Ext.Button({
64 text: '提交',
65 handler: btnsubmitclick
66 });
67 //重置按钮
68 var btnreset = new Ext.Button({
69 text: '重置',
70 listeners: {
71 'mouseover': btnresetmouseover,
72 'click': btnresetclick
73 }
74 });
75 //用户名input
76 var txtusername = new Ext.form.TextField({
77 width: 140,
78 allowBlank: false,
79 maxLength: 20,
80 name: 'username',
81 fieldLabel: '用户名称',
82 blankText: '请输入用户名',
83 maxLengthText: '用户名不能超过20个字符'
84 });
85 //密码input
86 var txtpassword = new Ext.form.TextField({
87 width: 140,
88 allowBlank: false,
89 maxLength: 20,
90 inputType: 'password',
91 name: 'password',
92 fieldLabel: '密码',
93 blankText: '请输入密码',
94 maxLengthText: '密码不能超过20个字符'
95 });
96 //----------------------数字字段开始----------------------//
97 var numberfield = new Ext.form.NumberField({
98 fieldLabel: '身高',
99 width: 80,
100 decimalPrecision: 1,
101 minValue: 0.01,
102 maxValue: 200,
103 unitText: ' cm',
104 allowBlank: false,
105 blankText: '请输入身高'
106 });
107 //----------------------数字字段结束----------------------//
108 //----------------------隐藏域字段开始----------------------//
109 var hiddenfield = new Ext.form.Hidden({
110 name: 'userid',
111 value: '1'
112 });
113 //----------------------隐藏域字段结束----------------------//
114 //----------------------日期字段开始----------------------//
115 var datefield = new Ext.form.DateField({
116 fieldLabel: '出生日期',
117 format: 'Y-m-d',
118 editable: false,
119 allowBlank: false,
120 blankText: '请选择日期'
121 });
122 //----------------------日期字段结束----------------------//
123 //表单
124 var form = new Ext.form.FormPanel({
125 frame: true,
126 title: '表单标题',
127 style: 'margin:10px',
128 html: '<div style="padding:10px">这里表单内容</div>',
129 items: [txtusername, txtpassword, numberfield, hiddenfield, datefield],
130 buttons: [btnsubmit, btnreset]
131 });
132 //窗体
133 var win = new Ext.Window({
134 title: '窗口',
135 width: 476,
136 height: 374,
137 html: '<div>这里是窗体内容</div>',
138 resizable: true,
139 modal: true,
140 closable: true,
141 maximizable: true,
142 minimizable: true,
143 buttonAlign: 'center',
144 items: form
145 });
146 win.show();
147 });
148 </script>
149 </head>
150 <body>
151 <!--
152 说明：
153 (1)var numberfield = new Ext.form.NumberField():创建一个新的NumberField数字文本框对象。
154 (2)99行，decimalPrecision: 1：设置小数点后面的位数，当位数超过时系统会自动截断。
155 (3)100行，minValue: 0.01：设置数字文本框最小值。
156 (4)101行，maxValue: 200:设置最大值。
157 (5)102行，unitText: ' cm'：注意，这个属性并非 Extjs文本框自带的属性，因为我们要在“身高”的后面加上
158 单位，所以在23行---43行对文本框进行了重写，重写时添加了属性"unitText"，并且在样式表中加了样式"x-form-unit"。
159 (6)var hiddenfield = new Ext.form.Hidden()：创建一个新的Hidden对象，隐藏字段用作参数占位符，
160 一般用来保存一些不希望用户直接看到的参数，并发送到服务器，例如：用户ID等。
161 (7)109行，name: 'userid'：Hidden对象的名称，这个名称是在服务端接收值的名称。发送参数格式如下：userid:1。
162 (8)110行，value: '1'：发送的值。
163 (9)var datefield = new Ext.form.DateField()：创建一个新的Datefield日期对象,Extjs的日期为英文类型，
所以要加入翻译成中文的js，代码第8行位置。
164 (10)116行，format: 'Y-m-d'：日期格式。
165 (11)117行，editable: false：设置为不可编辑。
166 -->
167 </body>
168 </html>
2.效果如下：
无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]的更多相关文章
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十一[下拉列表：Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
- 无废话ExtJs 入门教程五[文本框：TextField]
无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 无废话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自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
随机推荐
- php 简单说明IoC (php 实例+注释)
简单说明IoC <?php //Ioc ———— 设计方式 //控制反转 Inversion of Control //依赖关系的转移 //依赖抽象而非实践 //用于解决高层应用依赖 底层组件, ...
- php多线程抓取信息测试例子
php多线程抓取信息测试例子 PHP 5.3 以上版本,使用pthreads PHP扩展,可以使PHP真正地支持多线程.多线程在处理重复性的循环任务,能够大大缩短程序执行时间. PHP扩展下载:htt ...
- Hadoop2.2.0环境下Sqoop1.99.3安装
本文转载自http://blog.csdn.net/liuwenbo0920/article/details/40504045 1.安装准备工作: 已经装好的hadoop环境是hadoop 2.2.0 ...
- Java 中常用缓存Cache机制的实现《二》
所谓缓存,就是将程序或系统经常要调用的对象存在内存中,一遍其使用时可以快速调用,不必再去创建新的重复的实例.这样做可以减少系统开销,提高系统效率. AD: Cache 所谓缓存,就是将程序或系统经常要 ...
- PHP输出Excel两种方法
2016年3月23日 16:43:51 星期三 第一种: 输出html+css格式, 打开后用Excel软件的"另存为"功能保存为正规的表格格式 public function e ...
- ffmpeg-20160726-bin.7z
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...
- HDU 4940 Destroy Transportation system（无源汇有上下界最大流）
看不懂题解以及别人说的集合最多只有一个点..... 然后试了下题解的方法http://blog.sina.com.cn/s/blog_6bddecdc0102uzka.html 首先是无源汇有上下界最 ...
- C#关于new的用法
1.运算符就是在实例化一个类的时候(运算符的用法) A a=new A(); 2.new 约束指定泛型类声明中的任何类型参数都必须有公共无参数构造函数.当泛型类创建类型的新实例时,将此约束应用于类型参 ...
- code vs1506传话（塔尖）+tarjan图文详解
1506 传话 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 题目描述 Description 一个朋友网络,如果a认识b,那么如果a第一次收到 ...
- 【XLL 文档翻译】【第2部分】C API 回调函数 Excel4, Excel12
Excel4 和 Excel12 函数使得 DLL 可以调用 Excel 工作表函数.宏表函数.命令.XLL特定函数或命令.最近的一些 Excel 版本都支持 Excel12 函数.这两个函数支持下面 ...