SenchaTouch 2 一个简易的登录页面

来源：互联网发布：遂昌县网络干部学院编辑：程序博客网时间：2024/05/18 09:36

最近公司让做一个App，用到的SenchaTouch 2，对于一个连移动端都没见过的人来说，哎，你们懂的。

各种谷歌，各种百度，终于整了个这个，不过，还是不错的，感谢广大网友分享的精华，特推荐下这两位

大神网友的文章，必须得给力。

Sencha Touch 2快速入门系列 http://blog.csdn.net/ardyc/article/category/1101216

一个叫小金的网友 http://blog.csdn.net/jjx0224/article/category/1650487

首先下载引入源文件，这个就不用说了吧，下边是我的html引入源文件的代码

<!DOCTYPE HTML><html manifest="" lang="en-US"><head>    <meta charset="UTF-8">    <title>事例</title>    <link rel="stylesheet" type="text/css" href="../touch-2.3.1/resources/css/cupertino.css" />    <script type="text/javascript" src="../touch-2.3.1/sencha-touch-all-debug.js"></script>    <script type="text/javascript" src="../resource/js/app.js"></script></head><body></body></html>

接下来就是重点啦，js的代码，我尽量写了很多注释的，

Ext.application({    name: 'app',    launch: function() {    //登录form    var form = Ext.create('Ext.form.Panel', {//创建一个面板    fullscreen: true,//铺满整个屏幕    items: [    {id: 'status',xtype: 'toolbar',ui: 'light',dock: 'top',//title: "登录",style:'background-color: #0076C2',html:'<center><p style="margin-top: 0.8em;color:white;font-weight: bold;">登录</p></center>',},        {       margin:'1em 1em 0 1em',       style:'border: 0.09em solid #DCE2F3;border-radius:0.4em;',xtype: 'textfield',  //第一个文本框name: 'username',  //name用来获取值placeHolder: '账号',  //默认显示在文本框里的文字，点击和输入时它会消失required: true,  //必填字段useClearIcon: true  //输入内容后文本框后面会出现一个清空按钮},{margin:'1em 1em 0 1em',style:'border: 0.09em solid #DCE2F3;border-radius:0.4em;',xtype: 'passwordfield',  //密码文本框name: 'password', placeHolder: '密码',required: true,useClearIcon: true},        {            xtype: 'button',//添加一个登录按钮，            text: '立即登录',            ui: 'confirm',            style: 'margin :2em 1em 0 1em',            handler: function() {            var info = form.getValues();            var username = info.username;            var password = info.password;            if (username == "") {Ext.Msg.alert("提示","用户名不许为空！");return;            };            if (password == "") {            Ext.Msg.alert("提示","密码不许为空！");            return;            };Ext.Msg.alert("提示","<" + info.username + ">登录成功！");/*Ext.Viewport.setActiveItem(                        productList, {                            type : 'slide',                            direction : 'right'                        }                    );*/                }        },         //再用一个Container来放置链接文字{xtype: 'container',html: '<hr/>',margin: '16 0 0 0'},        {            xtype: 'button',//添加一个注册按钮，            text: '马上注册',            ui: 'action',            style: 'margin:0.2em 1em 0 1em',            handler: function() {Ext.Msg.alert("提示","注册去喽！");                }        },       /* {xtype: 'container',  //使用普通的Container容器即可height: 98,  //高度要跟图片尺寸相适应，由于我在下面html代码中给图片加了16px的margin-top，所以Container高度设置成图片高度+16，防止图片显示不完整width: 96,  //图片的宽度html: '<img src="../resource/img/logoText.jpg" style="margin-top: 16px;" />'  //直接设定html代码来显示图片，注意有16像素的顶部margin}*/    ]});

效果如下：

0 0