Extjs4.2进阶--完整前后台交互带数据库(带源码)
2016-12-26 09:44
411 查看
上一次的初识Extjs4.2-hello world ，演示了简单的弹窗以及需要载入哪些文件。这次讲一个简单但是完整的项目，前台是一个表单数据提交，后台是servlet，数据库有张简单的表。
一、需要导入的包，除了上次需要导入的文件外，还有额外导入extjs-4.2.0\examples\ux\form下的ItemSelector.js和MultiSelect.js文件；
二、前台的页面：
[html] view
plain copy
<!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:'身份',
emptyText:'请选择',
allowBlank:false,
store:[['正式员工','正式员工'],['实习生','实习生'],['外包人员','外包人员']]
},
//多选框
{
xtype: 'checkboxgroup',
fieldLabel: '兴趣',
id: 'hobby',
columns: 2,
vertical: true,
items: [
{ boxLabel: '音乐', name: 'rb', inputValue: '1', checked: true },
{ boxLabel: '运动', name: 'rb', inputValue: '2' },
{ boxLabel: '画画', name: 'rb', inputValue: '3' }
]
},
//文件上传文本框
{
xtype:'filefield',
name:'file',
id:'file',
fieldLabel:'上传',
allowbBlank:false,
msgTarget:'side',
buttonText:'选择文件'
},
//左右选择框
{
xtype: 'itemselector',
name: 'worktime',
id: 'worktime',
height : 200,
fieldLabel: '选择上班时间',
// imagePath: '../ux/images/',
imagePath: './Extjs4.2/MultiSelect/css/images/',
store: ds,
displayField: 'text',
valueField: 'value',
allowBlank: false,
msgTarget: 'side',
fromTitle: '选择时间',
toTitle: '工作时间'
}
]//form表单的items属性在此结束
,
//Form表单的按钮设置，其中的handler属性方法可以使用url与后台进行交互
buttons: [{
text: '保存',
handler: function() {
var form=this.up('form');
var name=form.down('textfield[name=name]').value;//输入框值的获取
var sf=form.down('combobox[name=level]').value; //单选框值的获取
//验证名字不能为空，要加return
if(!name){
alert('名字不能为空！');
return;}
if(!sf){
alert('身份不能为空！');
return;}
//多选框值的获取，通过循环加入数组中
var hobbyValue = Ext.getCmp('hobby').getChecked();
var hobby="";
Ext.Array.each(hobbyValue, function(item){
hobby+=','+item.boxLabel;
});
hobby=hobby.substring(1);//
var file=Ext.getCmp("file").getValue();//文件选择框的文件名的获取
//itemselector控件即左右选择框的值的获取
var worktime=Ext.getCmp("worktime").getValue();
var wc="";
for(var i=0;i<worktime.length;i++){
wc += ","+worktime[i];
}
wc = wc.substring(1);
var totalMessage='姓名：'+name+' 身份：'+sf+' 兴趣：'+hobby+' 上传文件地址：'+file+' 上班时间： '+worktime;
//Ext.MessageBox.alert('提示', '输入的地址' + file);
//Ext.MessageBox.alert('提示','输入的左右选择框是'+itemselector);
//Ext.MessageBox.alert('提示', '您的兴趣是' + hobby);
// Ext.MessageBox.alert('提示框',sf);
// Ext.MessageBox.alert('提示框','提交成功，正在保存数据，请稍后！');
//Ext.MessageBox.alert('输入信息为:','姓名：'+name+'<br />'+' 身份：'+sf+'<br />'+' 兴趣：'+hobby+'<br />'+' 上传文件地址：'+file+'<br />'+' 上班时间： '+worktime);
//JSON为参数
var json={};
Ext.apply(json,{name:name,sf:sf,hobby:hobby,file:file,worktime:wc});
Ext.Ajax.request({//此处进行保存数据到后端
method:'POST',
//url:就是我们要请求的路径
url:'/Extjs/FormServlet',
//success:是服务器处理成功返回
success:function(response){
// Ext.Msg.alert('返回成功',response.responseText,function(){
// store.load();
// });
Ext.Msg.alert("返回信息","提交成功。");
},
//failure:是服务器处理失败返回
failure:function(){
Ext.Msg.alert("错误","与后台联系的时候出了问题。");
},
//params:里面的参数用逗号隔开，就是我们要发出请求带的参数
//{name:name,sf:sf,hobby:hobby,file:file,worktime:worktime}
params:json
});
}
}]
});//form表单在此结束
var win = new Ext.Window({
title: '窗口',
width: 340,
height: 500,
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
items: form //将form表单放入win窗口中
});//win窗口在此结束
win.show();//显示窗口
});
</script>
</head>
<body>
</body>
</html>
说明：该前台页面代码中引入的
<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>
三个文件不知道为什么引不进去，查看firebug发现其使用了动态加载的方式，
路径为/Extjs/WebRoot/Extjs4.2/src/ux/form/ItemSelector.js
/Extjs/WebRoot/Extjs4.2/src/ux/form/MultiSelect.js
所以只好顺着它的意思，建立了Extjs4.2/src/ux/form该路径，并把两个js文件放入其中，使页面正常运行。
二、后台代码
数据库连接类：
需要在WebRoot/WEB_INF/lib文件下加入ojdbc6.jar包。在F:\app\Administrator\product\11.2.0\dbhome_1\jdbc\lib文件夹下，Oracle的安装文件夹
[java] view
plain copy
public class GetCollection {
public Connection getConn(){
Connection conn = null;// 创建一个数据库连接
try
{
Class.forName("oracle.jdbc.driver.OracleDriver");// 加载Oracle驱动程序
//System.out.println("开始尝试连接数据库！");
String url = "jdbc:oracle:" + "thin:@127.0.0.1:1521:chenn";// 127.0.0.1是本机地址，chenn表示数据库名称
String user = "system";// 用户名,系统默认的账户名
String password = "Oracle11g";// 你安装时选设置的密码
conn = DriverManager.getConnection(url, user, password);// 获取连接
//System.out.println("连接成功！");
}
catch (Exception e)
{
e.printStackTrace();
}
return conn;
}
}
servlet类：
[java] view
plain copy
public class FormServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
// String json = "{total:5,root:[";
// for(int i = 0;i<5;i++){
// json +="{id:"+i+",name:'name"+i+"',descn:'desc"+i+"'}";
//
// json+=",";
//
// }
// json+="]}";
String name = req.getParameter("name");
System.out.println(name);
String sf = req.getParameter("sf");
System.out.println(sf);
String hobby = req.getParameter("hobby");
System.out.println(hobby);
String url = req.getParameter("file");
System.out.println(url);
String worktime = req.getParameter("worktime");
System.out.println(worktime);
resp.getWriter().print(name+sf+hobby+url+worktime);
// resp.getWriter().print(json);
GetCollection getconn=new GetCollection();
Connection conn=getconn.getConn();
PreparedStatement ps=null;
String sql="insert into myMessage(name,sf,hobby,url,worktime) values(?,?,?,?,?)";
try {
ps=conn.prepareStatement(sql);
ps.setString(1, name);
ps.setString(2, sf);
ps.setString(3, hobby);
ps.setString(4, url);
ps.setString(5, worktime);
ps.executeUpdate();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
三、数据库创建语言：
数据库名为chenn，表建立SQL语句如下
[sql] view
plain copy
--建表myMessage
create table myMessage( myID number(10) not null primary key,
name varchar2(40) not null,
sf varchar2(40) not null,
hobby varchar2(40) not null,
url varchar2(300) null,
worktime varchar2(40) not null);
--创建序列my_autoinc_seq:
create sequence my_autoinc_seq
minvalue 1
maxvalue 99999999
start with 1
increment by 1
nocycle
nocache
order;
--创建触发器my_autoinc_tg:
create or replace trigger my_autoinc_tg
before insert on myMessage for each row --表示在插入一行数据之前
begin
select my_autoinc_seq.nextval into :new.myID from dual; --myID即主键 ，dual表示伪表
end my_autoinc_tg;
四、web.xml配置
[html] view
plain copy
<servlet-mapping>
<servlet-name>FormServlet</servlet-name>
<url-pattern>/FormServlet</url-pattern>
</servlet-mapping>
测试：
源码下载地址：
http://pan.baidu.com/s/1dDfBQhV
一、需要导入的包，除了上次需要导入的文件外，还有额外导入extjs-4.2.0\examples\ux\form下的ItemSelector.js和MultiSelect.js文件；
二、前台的页面：
[html] view
plain copy
<!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:'身份',
emptyText:'请选择',
allowBlank:false,
store:[['正式员工','正式员工'],['实习生','实习生'],['外包人员','外包人员']]
},
//多选框
{
xtype: 'checkboxgroup',
fieldLabel: '兴趣',
id: 'hobby',
columns: 2,
vertical: true,
items: [
{ boxLabel: '音乐', name: 'rb', inputValue: '1', checked: true },
{ boxLabel: '运动', name: 'rb', inputValue: '2' },
{ boxLabel: '画画', name: 'rb', inputValue: '3' }
]
},
//文件上传文本框
{
xtype:'filefield',
name:'file',
id:'file',
fieldLabel:'上传',
allowbBlank:false,
msgTarget:'side',
buttonText:'选择文件'
},
//左右选择框
{
xtype: 'itemselector',
name: 'worktime',
id: 'worktime',
height : 200,
fieldLabel: '选择上班时间',
// imagePath: '../ux/images/',
imagePath: './Extjs4.2/MultiSelect/css/images/',
store: ds,
displayField: 'text',
valueField: 'value',
allowBlank: false,
msgTarget: 'side',
fromTitle: '选择时间',
toTitle: '工作时间'
}
]//form表单的items属性在此结束
,
//Form表单的按钮设置，其中的handler属性方法可以使用url与后台进行交互
buttons: [{
text: '保存',
handler: function() {
var form=this.up('form');
var name=form.down('textfield[name=name]').value;//输入框值的获取
var sf=form.down('combobox[name=level]').value; //单选框值的获取
//验证名字不能为空，要加return
if(!name){
alert('名字不能为空！');
return;}
if(!sf){
alert('身份不能为空！');
return;}
//多选框值的获取，通过循环加入数组中
var hobbyValue = Ext.getCmp('hobby').getChecked();
var hobby="";
Ext.Array.each(hobbyValue, function(item){
hobby+=','+item.boxLabel;
});
hobby=hobby.substring(1);//
var file=Ext.getCmp("file").getValue();//文件选择框的文件名的获取
//itemselector控件即左右选择框的值的获取
var worktime=Ext.getCmp("worktime").getValue();
var wc="";
for(var i=0;i<worktime.length;i++){
wc += ","+worktime[i];
}
wc = wc.substring(1);
var totalMessage='姓名：'+name+' 身份：'+sf+' 兴趣：'+hobby+' 上传文件地址：'+file+' 上班时间： '+worktime;
//Ext.MessageBox.alert('提示', '输入的地址' + file);
//Ext.MessageBox.alert('提示','输入的左右选择框是'+itemselector);
//Ext.MessageBox.alert('提示', '您的兴趣是' + hobby);
// Ext.MessageBox.alert('提示框',sf);
// Ext.MessageBox.alert('提示框','提交成功，正在保存数据，请稍后！');
//Ext.MessageBox.alert('输入信息为:','姓名：'+name+'<br />'+' 身份：'+sf+'<br />'+' 兴趣：'+hobby+'<br />'+' 上传文件地址：'+file+'<br />'+' 上班时间： '+worktime);
//JSON为参数
var json={};
Ext.apply(json,{name:name,sf:sf,hobby:hobby,file:file,worktime:wc});
Ext.Ajax.request({//此处进行保存数据到后端
method:'POST',
//url:就是我们要请求的路径
url:'/Extjs/FormServlet',
//success:是服务器处理成功返回
success:function(response){
// Ext.Msg.alert('返回成功',response.responseText,function(){
// store.load();
// });
Ext.Msg.alert("返回信息","提交成功。");
},
//failure:是服务器处理失败返回
failure:function(){
Ext.Msg.alert("错误","与后台联系的时候出了问题。");
},
//params:里面的参数用逗号隔开，就是我们要发出请求带的参数
//{name:name,sf:sf,hobby:hobby,file:file,worktime:worktime}
params:json
});
}
}]
});//form表单在此结束
var win = new Ext.Window({
title: '窗口',
width: 340,
height: 500,
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
items: form //将form表单放入win窗口中
});//win窗口在此结束
win.show();//显示窗口
});
</script>
</head>
<body>
</body>
</html>
说明：该前台页面代码中引入的
<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>
三个文件不知道为什么引不进去，查看firebug发现其使用了动态加载的方式，
路径为/Extjs/WebRoot/Extjs4.2/src/ux/form/ItemSelector.js
/Extjs/WebRoot/Extjs4.2/src/ux/form/MultiSelect.js
所以只好顺着它的意思，建立了Extjs4.2/src/ux/form该路径，并把两个js文件放入其中，使页面正常运行。
二、后台代码
数据库连接类：
需要在WebRoot/WEB_INF/lib文件下加入ojdbc6.jar包。在F:\app\Administrator\product\11.2.0\dbhome_1\jdbc\lib文件夹下，Oracle的安装文件夹
[java] view
plain copy
public class GetCollection {
public Connection getConn(){
Connection conn = null;// 创建一个数据库连接
try
{
Class.forName("oracle.jdbc.driver.OracleDriver");// 加载Oracle驱动程序
//System.out.println("开始尝试连接数据库！");
String url = "jdbc:oracle:" + "thin:@127.0.0.1:1521:chenn";// 127.0.0.1是本机地址，chenn表示数据库名称
String user = "system";// 用户名,系统默认的账户名
String password = "Oracle11g";// 你安装时选设置的密码
conn = DriverManager.getConnection(url, user, password);// 获取连接
//System.out.println("连接成功！");
}
catch (Exception e)
{
e.printStackTrace();
}
return conn;
}
}
servlet类：
[java] view
plain copy
public class FormServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
// String json = "{total:5,root:[";
// for(int i = 0;i<5;i++){
// json +="{id:"+i+",name:'name"+i+"',descn:'desc"+i+"'}";
//
// json+=",";
//
// }
// json+="]}";
String name = req.getParameter("name");
System.out.println(name);
String sf = req.getParameter("sf");
System.out.println(sf);
String hobby = req.getParameter("hobby");
System.out.println(hobby);
String url = req.getParameter("file");
System.out.println(url);
String worktime = req.getParameter("worktime");
System.out.println(worktime);
resp.getWriter().print(name+sf+hobby+url+worktime);
// resp.getWriter().print(json);
GetCollection getconn=new GetCollection();
Connection conn=getconn.getConn();
PreparedStatement ps=null;
String sql="insert into myMessage(name,sf,hobby,url,worktime) values(?,?,?,?,?)";
try {
ps=conn.prepareStatement(sql);
ps.setString(1, name);
ps.setString(2, sf);
ps.setString(3, hobby);
ps.setString(4, url);
ps.setString(5, worktime);
ps.executeUpdate();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
三、数据库创建语言：
数据库名为chenn，表建立SQL语句如下
[sql] view
plain copy
--建表myMessage
create table myMessage( myID number(10) not null primary key,
name varchar2(40) not null,
sf varchar2(40) not null,
hobby varchar2(40) not null,
url varchar2(300) null,
worktime varchar2(40) not null);
--创建序列my_autoinc_seq:
create sequence my_autoinc_seq
minvalue 1
maxvalue 99999999
start with 1
increment by 1
nocycle
nocache
order;
--创建触发器my_autoinc_tg:
create or replace trigger my_autoinc_tg
before insert on myMessage for each row --表示在插入一行数据之前
begin
select my_autoinc_seq.nextval into :new.myID from dual; --myID即主键 ，dual表示伪表
end my_autoinc_tg;
四、web.xml配置
[html] view
plain copy
<servlet-mapping>
<servlet-name>FormServlet</servlet-name>
<url-pattern>/FormServlet</url-pattern>
</servlet-mapping>
测试：
源码下载地址：
http://pan.baidu.com/s/1dDfBQhV
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs4.2进阶--完整前后台交互带数据库(带源码)
- Extjs、ASP.net前后台Grid分页 数据库多表交互
- Extjs、ASP.net前后台Grid分页 数据库多表交互
- Extjs、ASP.net前后台Grid分页 数据库多表交互
- 完整数据库和完善的后台管理功能的新桃彩源码
- Extjs 4.2 Grid增删改及后台交互(Java)
- Appcan与后台数据库表交互，注册登录完整页面
- Extjs 4.2 Grid增删改及后台交互(Java)
- 【ExtJs】与后台数据库交互的带分页表格组件grid的查询
- Extjs、ASP.net前后台Grid分页 数据库多表交互(转)
- Extjs、ASP.net前后台Grid分页 数据库多表交互
- Extjs 与后台交互时 Mask UnMask
- Extjs和Asp.NET后台的数据交互1
- juery easyui 前后台交互小demo[附源码]
- ExtjsGrid 分页、ASP.net前后台数据交互
- Extjs结合后台数据库动态生成多层菜单树
- Extjs如何与数据库交互（三）
- Extjs学习总结之11前端与后台的数据交互ajax
- EXTJS4.0 用法笔记～～ 3种和后台交互数据的方法(小弟只会这三种。。。)
- Extjs和Asp.NET后台的数据交互（一） => Newtonsoft.Json 使用简介