无废话ExtJs 教程八[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]

zhaosnow

2015-06-01

继上第六节内容，我们在表单里加了个一个数字字段，隐藏字段，日期字段。如下代码所:

1. index.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP 'index.jsp' starting page</title>

	<!--ExtJs框架开始-->
	<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="Ext/ext-all.js"></script>
	<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
	<!--ExtJs框架结束-->	
	<!-- 	 
	<script type="text/javascript" src="study/helloWorld.js"></script>
	<script type="text/javascript" src='study/window.js'></script>
	<script type="text/javascript" src='study/formPanel.js'></script>
	<script type="text/javascript" src='study/textField.js'></script>
	<script type="text/javascript" src='study/button.js'></script>
	<script type="text/javascript" src='study/login.js'></script>
	-->	
	<!--调用/study/number_hidden_data_Field.js 实现登陆页面内的日期/数字/隐藏字段的调用  -->
	<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
	<script type="text/javascript" src='study/number_hidden_data_Field.js'></script>
	
	<style type="text/css">
		.loginicon
		{
			background-image: url(study/login.gif) !important;
		}
	</style>
	<style type='text/css'>
		.x-form-unit
		{
			height:22px;
			line-height:22px;
			padding-left:2px;
			display:inline-block;
			display:inline;
		}
	</style>
	
  </head>  
  <body>
  <br>
  </body>
</html>

2. number_hidden_data_Field.js 代码如下:

//----------------------这部分是针对身高后面的厘米cm单位    对formField进行重写----------------------//
Ext.override(Ext.form.TextField, {
    unitText: '',
    onRender: function (ct, position) {
        Ext.form.TextField.superclass.onRender.call(this, ct, position);
        // 如果单位字符串已定义 则在后方增加单位对象   
        if (this.unitText != '') {
            this.unitEl = ct.createChild({
                tag: 'div',
                html: this.unitText
            });
            this.unitEl.addClass('x-form-unit');
            // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况   
            this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);
            // 同时修改错误提示图标的位置   
            this.alignErrorIcon = function () {
                this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]);
            };
        }
    }
});

//**注意，这个属性并非 Extjs文本框自带的属性，因为我们要在“身高”的后面加上
//**单位，所以在23行---43行对文本框进行了重写，重写时添加了属性"unitText"，并且在样式表中加了样式"x-form-unit"。
//----------------------------重写结束---------------不太懂，没重写过----------------------------//

Ext.onReady(function(){
	
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	
	
	var submit = function(){
		Ext.MessageBox.alert('This is the sumbit/Reset opration..');
	}
	
	new Ext.Window({
		iconCls:'loginicon',
		width:377,
		height:209,
		plain:true,
		shadow:false,
		modal:true,
		items:[
			new Ext.form.FormPanel({
					frame:true,
					style:'margin:10px',
					bodyStyle:'padding:6px 0px 0px 15px',
					labelWidth:59,
					items:[
						
						//----------------------1.文本字段开始----------------------//
						new Ext.form.TextField({
								fieldLabel:'Username',
								allowBlank:false,
								blankText:'The username is required..'
								//width:45
						}),
						
						//Password TextField
						new Ext.form.TextField({
								fieldLabel:'Password',
								allowBlank:false,
								blankText:'The password is required..'
							
						}),
						//----------------------文本字段结束----------------------//
						
						
						//----------------------2.数字字段开始----------------------//
						//创建一个新的NumberField数字文本框对象
						new Ext.form.NumberField({
							fieldLabel:'Stature',
							minValue:'0.01',					//设置数字文本框最小值
							maxValue:'230',						//设置数字文本框最大值
							decimalPrecision: 1,				//设置小数点后面的位数，当位数超过时系统会自动截断
							//unitText:' cm',
							unitText: ' cm',
							allowBlank:false,
							blankText:'The stature field is required..',
							width:80
							
						}),
						//----------------------数字字段结束----------------------//
						
						
						
						//----------------------3.日期字段开始----------------------//
						new Ext.form.DateField({				//创建一个新的Datefield日期对象,Extjs的日期为英文类型
							fieldLabel:'Data',					//所以要加入翻译成中文的js.  此js 在index.jsp页面内
							allowBlank:false,
							blankText:'The date field is required',
							editable:false,						//设置为不可编辑
							format:'Y/m/d'						//当然也可以定格式为 format:'Y-m-d'样式
						}),
						//----------------------日期字段结束----------------------//
						
						
						
						//----------------------4.隐藏字段开始----------------------//
						new Ext.form.Hidden({					//创建一个新的Hidden对象，隐藏字段用作参数占位符， 一般用来保存一些不希望用户直接看到的参数，并发送到服务器，例如：用户ID等。
							id:'userId',						//这个名称是在服务端接收值的名称。发送参数格式如下：userid:123  
							name:'123'							
						})										
						//----------------------隐藏字段结束----------------------//
					],
					//Button
					buttonAlign:'center',
					buttons:[
						new Ext.Button({
							text:'Submit',
							handler:submit
						}),
						
						new Ext.Button({
							text:'Reset',
							listeners:{'mouseover':submit}
						})
					]
					
					
				}
			)
		]
	}).show();
	
});

3. 效果如下：

无废话ExtJs 教程八[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]