无废话ExtJs 教程十二[员工信息表Demo：AddUser]

Tjhfsghbjknjdy

2015-06-04

前面我们共已经学过10种表单组件，这些组件是我们在开发过程中最经常用到的，所以一定要用到非常熟练才可以，今天我们会通过一个员工信息表实例，再把这些组件串一下。

(1)TextField (2)Botton (3)NumberField (4)Hidden (5)DataFiedl (6)RadioGroup (7)CheckBoxGroup (8)Combobox (9)File (10)Editor

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/employee_information.js 实现员工信息页面  -->
	<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
	<script type="text/javascript" src="study/kindeditor/kindeditor.js"></script>
	<script type="text/javascript" src='study/employee_information.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. employee_information.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:Qtip属性
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	
	var dataStore = new Ext.data.ArrayStore({
		fields:['id','name'],
		data:[[1,'Christian'],[2,'member'],[3,'Party member']]		
	});
	
	
	new Ext.Window({
		title:'Window',
		width:900,
		height:580,
		items:[
			new Ext.form.FormPanel({
				title:'Employee Information',
				style:'margin:10px',
				frame:true,
				labelWidth:56,
				
				//监听表单的 render 事件，创建 KE Editor 编辑器
				listeners: {
					'render': function () {
						KE.show({
							id: 'keeditor1'        //这里的keeditor1 要和58行及266行的'keeditor1'统一，否则无法显示
							//imageUploadJson: ''
						});
						setTimeout("KE.create('keeditor1');", 1000);
					}
				},
				
				items:[
					{
						layout:'column', 							//我们需要注意这里的写法
						items:[										//不是真接new 一个对象,而是使用items
							
							//---------------第一列开始------------------//
							{
								columnWidth:.28, 					//注意33前面一定要有点！
								layout:'form',						//否则第二列会在第一列下方，而不是右方
								items:[
									//姓名
									new Ext.form.TextField({
										fieldLabel:'Name',
										width:130
									}),
									
									//信仰状况
									new Ext.form.ComboBox({
										fieldLabel:'Faith',
										store:dataStore,
										displayField:'name',
										valueField:'id',
										mode:'local',
										triggerAction:'all',
										emptyText:'Please to select..',
										editable:false,
										width:130
									}),
									
									//毕业院校
									new Ext.form.TextField({
										fieldLabel:'Graduation',
										allowBlank:false,
										blankText:'This field is required..',
										width:130
									}),
									
									//通讯地址
									new Ext.form.TextField({
										fieldLabel:'Address',
										allowBlank:false,
										blankText:'The address field is required..',
										width:130
									})
								]
							},
							//---------------第一列结束------------------//
							
							//---------------第二列开始------------------//
							{
								columnWidth:.28,						//注意28前面一定要有点！
								layout:'form',
								items:[
								
									//性别
									new Ext.form.RadioGroup({
										fieldLabel:'Sex',
										width:130,
										items:[
											new Ext.form.Radio({
												boxLabel:'man',
												checked:true
											}),
											new Ext.form.Radio({
												boxLabel:'woman'
											})
										]
									}),
									
									//身高
									new Ext.form.NumberField({
										fieldLabel:'Stature',
										allowBlank:false,
										blankText:'The stature is required..',
										unitText: ' cm',
										width:130
									}),
									
									//毕业专业
									new Ext.form.TextField({
										fieldLabel:'Major',
										allowBlank:false,
										blankText:'The major field is required..',
										width:130
									}),
									
									//联系电话
									new Ext.form.TextField({
										fieldLabel:'Tel',
										allowBlank:false,
										blankText:'The tel field is required..',
										width:130
									})
								]
							},
							//---------------第二列结束------------------//
							
							
							//---------------第三列开始------------------//
							{
								columnWidth:.25,
								layout:'form',
								items:[
								
									//年龄
									new Ext.form.TextField({
										fieldLabel:'Age',
										unitText:' year',
										width:117
									}),
									
									//体重
									new Ext.form.TextField({
										fieldLabel:'Weight',
										unitText:' kg',
										width:117
									}),
									
									//毕业日期
									new Ext.form.TextField({
										fieldLabel:'GraduDate',
										width:117
									})
								]
							},
							//---------------第三列结束------------------//
							
							
							//---------------第四列_上传照片开始------------------//
							{
								columnWidth:.16,
								layout:'form',
								style:'marginBottom: 15px',
								items:[
									//上传照片
									new Ext.BoxComponent({
										autoEl: {
											style: 'width:65px;height:60px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:10px;margin-bottom:8px',
											tag: 'div',
											id: 'imageshow',
											html: 'No photos'
										}
									}),
									
									//照片下面的按钮
									new Ext.Button({
										text:'Upload Image',
										style:'margin:0px auto',		//1. margin:0px auto 可以使用按钮居中
										width:20,						//2. marginBottom 调整按钮到底部高度
										handler:function(){
											Ext.MessageBox.alert('Prompt','Please upload image..');
										}
									})
								]
							}
							//---------------第四列_上传照片结束------------------//
						]
					},
					
					//---------------招聘来源开始------------------//
					new Ext.form.CheckboxGroup({
						fieldLabel:'Source',
						width:712,
						style:'marginBottom: 20px',				  //marginBottom:20px 用来设置与其下面的组件间距为20像素
						items:[
							//报纸招聘
							new Ext.form.Checkbox({
								boxLabel:'Newspaper',
								checked:true
							}),
							
							//学校招聘
							new Ext.form.Checkbox({
								boxLabel:'School'
							}),
							
							//人才市场
							new Ext.form.Checkbox({
								boxLabel:'Talent Market'
							}),
							
							//招聘网站
							new Ext.form.Checkbox({
								boxLabel:'Website'
							})
						]
					}),
					//---------------招聘来源结束------------------//
					
					
					//---------------创建文本上传域开始------------------//
					/*
					//创建一个新的html编辑器
					new Ext.form.HtmlEditor({
						fieldLabel:'Other Inf',
						width:745,
						style:'margin: 0px auto',
						height:320
					})*/
					
					
					//创建一个新的TextArea,里面加载kindeditor编辑器
					new Ext.form.TextArea({
						fieldLabel:'Descript',
						id:'keeditor1',
						width:745,
						height:320
					})
					//---------------创建文本上传域结束------------------//
				]
			})
		]
	}).show();
	
});

3. 效果如下：

注1：使用html编辑器

无废话ExtJs 教程十二[员工信息表Demo：AddUser]