SenchaTouch 2 一个简易的登录页面

最新推荐文章于 2019-07-20 00:50:05 发布

sammer_mx

最新推荐文章于 2019-07-20 00:50:05 发布

阅读量1.9k

点赞数

分类专栏： Sencha Touch 2 文章标签： sencha app 移动 ui javascript

本文链接：https://blog.csdn.net/yuwei1991/article/details/38733515

版权

Sencha Touch 2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近公司让做一个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
				}*/
		    ]
		});

效果如下：