前面我们共已经学过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]_第1张图片](http://img.e-com-net.com/image/product/5e659e47fec84facaccef9fb88908027.jpg)
注2：使用kindeditor编辑器：
![无废话ExtJs 教程十二[员工信息表Demo：AddUser]_第2张图片](http://img.e-com-net.com/image/product/a188908022b943ed80f7a1fd4b1c0b4f.jpg)
4. 项目代码请从附件[extjs_employee_information.zip] 中下载,
index.jsp 位于WebRoot/index.jsp
employee_information.js 位于 WebRoot/study/employee_information.js
5. kindeditor 编辑器下载:
附件[kindeditor.rar]