Extjs4.2进阶--完整前后台交互带数据库(带源码)

最新推荐文章于 2021-01-21 10:44:12 发布

原创

最新推荐文章于 2021-01-21 10:44:12 发布 · 4.1k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了一个使用ExtJS4.2实现的简单但完整的项目，包括前端表单数据提交，后端Servlet处理，以及数据库交互。涉及到的文件导入、页面设计、后台Servlet代码编写和数据库表的创建。提供了源码下载链接供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一次的初识Extjs4.2-hello world ，演示了简单的弹窗以及需要载入哪些文件。这次讲一个简单但是完整的项目，前台是一个表单数据提交，后台是servlet，数据库有张简单的表。

一、需要导入的包，除了上次需要导入的文件外，还有额外导入extjs-4.2.0\examples\ux\form下的ItemSelector.js和MultiSelect.js文件；

二、前台的页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <!--ExtJs框架开始-->
    <link rel="stylesheet" type="text/css" href="./Extjs4.2/resources/css/ext-all.css" />
    <script type="text/javascript" src="./Extjs4.2/ext-all.js"></script>
     <script type="text/javascript" src="./Extjs4.2/locale/ext-lang-zh_CN.js"></script>
    <!-- 再加三个文件，1CSS+2js -->
    <link rel="stylesheet" type="text/css" href="./Extjs4.2/MultiSelect/css/ItemSelector.css" />
    <script type="text/javascript" src="./Extjs4.2/MultiSelect/ItemSelector.js"></script>
    <script type="text/javascript" src="./Extjs4.2/MultiSelect/MultiSelect.js"></script>
    <!--ExtJs框架结束-->
    <script type="text/javascript">
    Ext.onReady(function(){
    	
    	 //定义数组数据
        var ds = Ext.create('Ext.data.ArrayStore', {
             data: [['上午', '上午'], ['下午', '下午'], ['晚上', '晚上']],//第一个参数表示id，通过方法可以得到这个值，第二个表示显示页面的值
             fields: ['value','text'],
             sortInfo: {
                  field: 'value',
                 direction: 'ASC'
            }
       });
    	//表单设置
    	var form=Ext.create('Ext.form.Panel',{
    	title:'表单',
    	width:340,
    	bodyPadding:10,//在body元素上设置padding样式的快捷方式。
    	frame:true,
    	buttonAlign:'center',//居中
    	renderTo:Ext.getBody(),
        //items属性表示该表单有多少个控件
        items:[
    	//输入框
    	{
    	xtype:'textfield',
    	name:'name',
    	fieldLabel:'姓名',
    	allowBlank:false,
    	maxLength:10
    	},
    	//单选框
    	{
    	xtype:'combobox',
    	name:'level',
    	fieldLabel:'身份',
    	e