上一次的初识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:'身份',
- 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的安装文件夹
- 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类:
- 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语句如下
- --建表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配置
- <servlet-mapping>
- <servlet-name>FormServlet</servlet-name>
- <url-pattern>/FormServlet</url-pattern>
- </servlet-mapping>
测试:
源码下载地址:
http://pan.baidu.com/s/1dDfBQhV