前面我们共已经学过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编辑器
注2：使用kindeditor编辑器：
4. 项目代码请从附件[extjs_employee_information.zip] 中下载,
index.jsp 位于WebRoot/index.jsp
employee_information.js 位于 WebRoot/study/employee_information.js
5. kindeditor 编辑器下载:
附件[kindeditor.rar]
相关推荐
在"无废话ExtJS系列教程十八[继承：Extend]"中，我们主要关注的是ExtJS中的类继承机制，这是一个核心特性，它允许开发者创建可复用和可扩展的组件结构。在JavaScript中，继承是通过原型链实现的，而在ExtJS中，它被...
《无废话ExtJs系列教程十五：树：TreePanel》 ExtJs是一个强大的JavaScript库，用于构建富客户端Web应用。在本教程中，我们将深入探讨一个重要的组件——TreePanel，它是ExtJs用来展示层次结构数据的工具，常用于...
在"无废话ExtJS 系统教程十四[列表：GridPanel]"中，我们将会深入探讨如何有效地使用GridPanel来创建高效的、功能丰富的数据列表。 GridPanel是ExtJS中的核心组件之一，它允许用户以表格形式展示大量数据，并支持...
本教程将深入探讨ExtJS中的Combobox组件，包括其基本用法、配置选项、事件处理和自定义功能。 1. **Combobox的基本结构** - Combobox由两个主要部分组成：文本输入框和下拉列表。用户可以在输入框中键入文字，或者...
NULL 博文链接：https://huiqinbo.iteye.com/blog/2217105
总之，"无废话ExtJs 系统教程十九[动态复选框：RemoteCheckboxGroup]"是一个帮助开发者掌握如何在ExtJS应用中实现动态复选框组件的资源。通过学习和实践，你可以创建出更加灵活和高效的用户界面，同时利用源码和工具...
ExtJS 是一个强大的JavaScript库，专门用于构建富客户端的Web应用程序。在本示例中，我们专注于ExtJS 4.0版本，这是一个功能丰富的框架，提供了丰富的组件、布局管理和数据绑定等功能。 首先，要开始学习ExtJS 4，...
extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程
extjs的经典标签，表单等案例,学习extjs前端框架的基础
http://【localhost:5012/web】/Extjs5Demo/build/examples/index.html 【】内，输入Extjs5Demo在服务器上的地址，即可看到官方文档
ExtJS教程全面介绍了ExtJS框架的基本功能和高级特性，适用于有Web开发经验的开发者，尤其是希望快速构建丰富用户界面的人员。ExtJS是一个基于JavaScript的开源前端框架，它提供了丰富的用户界面组件和数据处理机制，...
"ExtJS+SSH+Junit的Demo" 这个标题指的是一个示例项目，它结合了三个关键技术：ExtJS（一个用于构建Web应用的JavaScript库）、SSH（Struts2、Spring和Hibernate的集成框架）以及Junit（Java单元测试框架）。...
extjs 轻松搞定EXTJS.pdf +很多DEMO 高清 高质量 案例
EXTJS3.0登录DEMO是一个基于EXTJS框架的示例项目，展示了如何将EXTJS与STRUTS2、SPRING和IBATIS等流行Java技术整合，构建一个完整的Web应用程序。EXTJS是一个用于创建富客户端界面的JavaScript库，而STRUTS2、SPRING...
在浏览器中导航到localhost：1841以查看应用程序创建自己的ExtJS 5应用程序下载（或） 使用Sencha Cmd，运行： sencha -sdk path/to/ext/ext-5.1.0 generate app MyApp path/to/where/you/want/it 导航到您刚刚创建...
ExtJS4 + ASP.NET MVC Demo是一个结合了前端ExtJS4框架和后端ASP.NET MVC架构的应用示例，展示了如何在Web开发中实现数据操作的增删改查功能，并且利用了ExtJS4的MVC模式来提高代码的组织性和可维护性。这个Demo还...