人事考勤系统之Sencha Touch 2登录界面

Posted 周二, 07/09/2013 - 11:49 by admin

这几天想了一想，想把自己空闲的时间利用起来开发一套Sencha Touch 2的人事考勤系统。和大家一起分享, 也希望大家能参于进来，一起开发。
今天我打算把登录界面发布出来，不过有几个问题我还在思考当中.
1: 字体不是太好, 界面看的也不是太舒服.
2: 当单击登录按钮的时候还没有实现验证用户名和密码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="touch/resources/css/sencha-touch.css">
    <script id="microloader" type="text/javascript" src="touch/sencha-touch-debug.js"></script>
</head>
    <style type="text/css">
        a {
            text-decoration: none;
        }
    </style>
    <script>
        Ext.require("Ext.MessageBox");
        Ext.application({
            name: "PersonnelAttendanceSystem",
            launch: function() {
                var dockedItems = [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            text: '退出',
                            ui: 'back',
                            handler: function() {

                            }
                        },
                        { xtype: 'spacer' },
                        {
                            text: '注册',
                            ui: 'action',
                            handler: function() {

                            }
                        }
                    ]
                }];
                var mainPanel = Ext.create('Ext.Container', {
                    fullscreen: true,
                    layout: 'vbox',
                    items: [
                        {
                            dockedItems: dockedItems
                        },
                        { xtype: 'spacer' },
                        {
                            xtype: 'panel',
                            style: 'text-align:center;font-size: 24pt;',
                            html: '人事考勤系统',
                            id: 'form',
                            flex: 2
                        },
                        {
                            xtype: 'panel',
                            flex: 4,
                            items: [
                                {
                                    xtype: 'fieldset',
                                    items: [
                                        {
                                            xtype: 'emailfield',
                                            labelAlign: 'left',
                                            name: 'username',
                                            id: 'username',
                                            label: '用户名：',
                                            placeHolder:'输入用户名'
                                        },
                                        {
                                            xtype: 'passwordfield',
                                            labelAlign: 'left',
                                            name: 'password',
                                            id: 'password',
                                            label: '密码：',
                                            placeHolder: '输入密码'
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            layout:'hbox',
                            items:[
                                {
                                    xtype: 'button',
                                    name: 'login',
                                    id: 'login',
                                    text: '登录',
                                    style: 'margin-left:10px;',
                                    ui:'action',
                                    width: 150,
                                    handler:function() {
                                        var usernameProxy = Ext.getCmp('username').getValue();
                                        var passwordProxy = Ext.getCmp('password').getValue();
                                        if(usernameProxy == '') {
                                            Ext.Msg.alert("错误信息", "用户名不能为空.");
                                        } else if(passwordProxy == '') {
                                            Ext.Msg.alert("错误信息", "密码不能为空.");
                                        }

                                    }
                                },
                                {
                                    xtype: 'panel',
                                    style: 'margin-left:10px;padding-top:10px;',
                                    html: "<a href='#'>忘记密码?</a>"
                                }
                            ]
                        },
                        { xtype: 'spacer' }
                    ]
                });
                Ext.Viewport.add(mainPanel);
            }
        });

    </script>
<body>

</body>
</html>

布局方面用到了vbox and hbox两种.
界面如下: