day1:
本来做这个就是用来学习ExtJS的，所以大部分是现学来的 后端也来不及仔细的做，先上今天的代码
登陆html：
<html> <head> <title></title> <!--ExtJs start--> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script src="adapter/ext/ext-base.js"></script> <script src="ext-all-debug.js"></script> <script src="ext-all.js"></script> <!--ExtJs end--> <!-- 覆盖原有CSS 修改文本框下侧红色波浪线样式如下 --> <style type="text/css"> .x-form-invalid,textarea.x-form-invalid { background-color: #FFFFFF; background-image: none; border-color: #B5B8C8; } </style> <!-- 自定义背景样式CSS--> <style type="text/css"> .loginicon { background-image: url(image/a.gif) !important; } </style> <!--ExtJs end--> <!--Text index CSS --> <script type="text/javascript"> Ext.onReady(function() { //传输编码方式 Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8'; //ExtJS组件自适应浏览器大小 Ext.EventManager.onWindowResize(function() { Ext.ComponentManager.each(function(cmpId, cmp, length) { if (cmp.hasOwnProperty("renderTo")) { cmp.doLayout(); } }); }); //quickTips初始化 //提示气泡使用必须先初始化该项 Ext.QuickTips.init(); //表单提示信息的显示格式 Ext.form.Field.prototype.msgTarget = 'side'; var username = new Ext.form.TextField({ id:'username', width : 140, allowBlank : false, maxLength : 15, name : 'username', fieldLabel : '用户名', blankText : '请输入用户名', maxLengthText : '用户名不能超过15个字符' }); var password=new Ext.form.TextField({ id:'password', width : 140, allowBlank : false, maxLength : 20, inputType:'password', name : 'password', fieldLabel : '密码', blankText : '请输入密码', maxLengthText : '密码不能超过20个字符' }); //登陆提交验证控件 var submitclick = function() { Ext.Ajax.request({ url: 'http://localhost:8080/maybe/login.action?up='+ encodeURIComponent(Ext.getCmp("username").getValue())+','+Ext.getCmp("password").getValue(), method: 'post', params: { up: 1}, success: function (response, aa) { var json = Ext.util.JSON.decode(response.responseText); //alert(json.id); //alert(json.mag); // alert(response.responseText); if(json.id==0){ alert('登陆成功'); window.location.href="basicInformation.html"; } }, failure: function () { alert('系统出错，请联系管理人员！'); } }); }; var resetclick = function() { // form.getForm().submit({ // method:'post', // url: "http://localhost:8080/maybe/login.action", // success: function (form, action) { // Ext.Msg.alert('Success', action.result.mag); // } //}); form.getForm().reset(); }; var btnsubmit = new Ext.Button({ text : '提交', // 当用户点击时 执行btnsubmitclick方法 handler : submitclick }); var btnreset = new Ext.Button({ text : '重置', handler : resetclick }); var form = new Ext.form.FormPanel({ url : '****', //http://localhost:8080/maybe/login.action id : "mlgb", labelAlign : 'right', labelWidth : 45, frame : true, cls : 'loginform', buttonAlign : 'center', bodyStyle : 'padding:6px 0px 0px 15px', items : [ username,password], buttons : [ btnsubmit, btnreset ], html : '<span>@左小侠 练习做</span>' }); //创建窗体 var win = new Ext.Window({ title : '车辆管理系统', //追加背景样式 iconCls : 'loginicon', id : 'window', width : 276, height : 144, //是否可拖拽变更窗口 resizable : false, modal : true, closable : true, maximizable : true, minimizable : true, items : form }); win.show(); }); </script> </head> </html>
后端代码 用Sturts2很简单做的 无数据库交互 纯属模拟
public String login() throws IOException { String up = new String(ServletActionContext.getRequest() .getParameter("up").getBytes("UTF-8"), "GBK"); String[] data = up.split(","); String username = data[0]; String password = data[1]; System.out.println(username); System.out.println(password); ServletActionContext.getResponse().setContentType( "text/json;charset=UTF-8"); outString("{id:0,mag:'登陆成功 '}"); return null; }
这是做好的界面
功能不够详细，目前只是熟悉了一下数据的交互和页面布局
也遇到了一些问题，希望有大神能看到帮我解决
问题一：乱码问题 如果用户名提交的是中文 客户端会打印出乱码
问题二:中文的 fieldLabel 如果太长会换行 怎么设置
第二个页面：
明天会进行修改 今天由于时间原因拿来练手 主要是练习 怎么将数据加载进form
<html> <head> <title>汽车基本信息表</title> <!--ExtJs start--> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script src="adapter/ext/ext-base.js"></script> <script src="ext-all-debug.js"></script> <script src="ext-all.js"></script> <!--ExtJs end--> <!-- 覆盖原有CSS 修改文本框下侧红色波浪线样式如下 --> <style type="text/css"> .x-form-invalid,textarea.x-form-invalid { background-color: #FFFFFF; background-image: none; border-color: #B5B8C8; } </style> <style type="text/css"> .loginicon { background-image: url(image/a.gif) !important; } </style> <!-- 自定义背景样式CSS--> <script type="text/javascript"> Ext.onReady(function() { //ExtJS组件自适应浏览器大小 Ext.EventManager.onWindowResize(function() { Ext.ComponentManager.each(function(cmpId, cmp, length) { if (cmp.hasOwnProperty("renderTo")) { cmp.doLayout(); } }); }); //quickTips初始化 //提示气泡使用必须先初始化该项 Ext.QuickTips.init(); //表单提示信息的显示格式 Ext.form.Field.prototype.msgTarget = 'side'; var carname = new Ext.form.TextField({ id:'carname', width : 140, allowBlank : false, maxLength : 20, name : 'carname', fieldLabel : '汽车型号', blankText : '请输入汽车型号', }); var carnumber = new Ext.form.TextField({ id:'carnumber', width : 140, allowBlank : false, maxLength : 20, name : 'carnumber', fieldLabel : '汽车车牌号', blankText : '请输入汽车牌号', }); var name = new Ext.form.TextField({ id:'name', width : 140, allowBlank : false, maxLength : 20, name : 'name', fieldLabel : '车主姓名', blankText : '请输入车主姓名', }); var number = new Ext.form.TextField({ id:'number', width : 140, allowBlank : false, maxLength : 20, name : 'name', fieldLabel : '车主驾驶证号', blankText : '请输入车主驾驶证号', }); var transgressnumber = new Ext.form.TextField({ //设置只读属性 disabled :true, id:'transgressnumber', width : 140, allowBlank : false, maxLength : 20, name : 'transgressnumber', fieldLabel : '违规次数', }); var Attribution = new Ext.form.TextField({ id:'Attribution', width : 140, allowBlank : false, maxLength : 20, name : 'Attribution', fieldLabel : '车辆归属地', }); var submitclick = function() { alert('修改成功'); }; var resetclick = function() { form.getForm().reset(); }; var btnsubmit = new Ext.Button({ text : '提交', // 当用户点击时 执行btnsubmitclick方法 handler : submitclick }); var btnreset = new Ext.Button({ text : '重置', handler : resetclick }); var loadclick = function() { Ext.Ajax.request({ url: 'http://localhost:8080/maybe/getInformation.action', method: 'post', params: {}, success: function (response, recc) { var json = Ext.util.JSON.decode(response.responseText); Ext.getCmp("name").setValue(json.name); Ext.getCmp("number").setValue(json.number); Ext.getCmp("carname").setValue(json.carname); Ext.getCmp("carnumber").setValue(json.carnumber); Ext.getCmp("Attribution").setValue(json.Attribution); Ext.getCmp("transgressnumber").setValue(json.transgressnumber); alert('加载完成'); }, failure: function () { alert('系统出错，请联系管理人员！'); } }); }; var btnload = new Ext.Button({ text : '读取', handler : loadclick }); var form = new Ext.form.FormPanel({ url : '****', //http://localhost:8080/maybe/login.action id : "mlgb", //修改TextField 中的fieldLabel属性 labelAlign : 'left', labelWidth : 80, frame : true, cls : 'loginform', buttonAlign : 'center', bodyStyle : 'padding:6px 0px 0px 15px', items : [ carname,carnumber,name,number,Attribution,transgressnumber], buttons : [ btnsubmit, btnreset,btnload], html : '<span>@左小侠 练习做</span>' }); var win = new Ext.Window({ title : '车辆信息', //追加背景样式 iconCls : 'loginicon', id : 'window', width : 376, height : 254, //是否可拖拽变更窗口 resizable : false, modal : true, closable : true, maximizable : true, minimizable : true, items : form }); win.show(); }); </script> </head> </html>
后端代码：
public String getInformation(){ System.out.println("有人调用了我"); ServletActionContext.getResponse().setContentType( "text/json;charset=UTF-8"); outString("{carname:'保时捷',carnumber:'贵LPK110',name:'覃发钠',number:'131494SB',Attribution:'贵州',transgressnumber:10}"); return null; } // write public void outString(String a) { try { PrintWriter out = ServletActionContext.getResponse().getWriter(); out.write(a); } catch (IOException e) { e.printStackTrace(); } }
界面：
在这里也遇到了一些新的问题
问题一：from的加载问题 找其他的大神的资料没有看懂 只能这样一个个的Set的方式读取