Extjs4.2进阶--完整前后台交互带数据库(带源码)
来源：互联网 发布：淘宝被盗号了怎么办 编辑：程序博客网 时间：2024/04/30 01:41
上一次的初识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>
-
- <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>
-
- <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>
-
- <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>
二、后台代码
数据库连接类：
需要在WebRoot/WEB_INF/lib文件下加入ojdbc6.jar包。在F:\app\Administrator\product\11.2.0\dbhome_1\jdbc\lib文件夹下，Oracle的安装文件夹
- public class GetCollection {
-
- public Connection getConn(){
- Connection conn = null;
- try
- {
- Class.forName("oracle.jdbc.driver.OracleDriver");
-
- String url = "jdbc:oracle:" + "thin:@127.0.0.1:1521:chenn";
- String user = "system";
- String password = "Oracle11g";
- conn = DriverManager.getConnection(url, user, password);
-
-
- }
- catch (Exception e)
- {
- e.printStackTrace();
- }
- return conn;
- }
- }
servlet类：
- 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 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);
-
-
-
- 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) {
-
- e.printStackTrace();
- }
- }
- }
三、数据库创建语言：
数据库名为chenn，表建立SQL语句如下
-
- 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);
-
-
- create sequence my_autoinc_seq
- minvalue 1
- maxvalue 99999999
- start with 1
- increment by 1
- nocycle
- nocache
- order;
-
-
- 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;
- end my_autoinc_tg;
- <servlet-mapping>
- <servlet-name>FormServlet</servlet-name>
- <url-pattern>/FormServlet</url-pattern>
- </servlet-mapping>
测试：
源码下载地址：
http://pan.baidu.com/s/1dDfBQhV
0 0
