准备用Extjs+ssh做一个小的web系统

最新推荐文章于 2016-06-04 18:56:14 发布

weixin_30788619

最新推荐文章于 2016-06-04 18:56:14 发布

阅读量61

点赞数

原文链接：http://www.cnblogs.com/zuoxiaoxia/p/4718748.html

版权

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的方式读取

转载于:https://www.cnblogs.com/zuoxiaoxia/p/4718748.html

weixin_30788619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
准备用Extjs+ssh做一个小的web系统

day1:　　　　本来做这个就是用来学习ExtJS的，所以大部分是现学来的后端也来不及仔细的做，先上今天的代码　　　　登陆html：　　　　　　　　<html><head><title></title><link rel="stylesheet"...
复制链接

扫一扫