HTML5开发实战——Sencha Touch篇

Posted fareise

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5开发实战——Sencha Touch篇相关的知识,希望对你有一定的参考价值。

学习了许多基本的Sencha Touch内容,已经了解了Sencha Touch的开发模式。接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建。先要解决的是前端的问题,从最简单的入手,一个基本的登录界面。

最简单的登录界面大体由以下介个元素组成:用户头像部分、用户名输入部分、密码输入部分、提交按钮。我们从这种虽简单的界面开始,逐步进行界面实现。

一、创建主面板

Ext.require('Ext.Panel');
Ext.application({
	name:'MyApp',
	icon:'image/icon.png',
	glossOnIcon:false,
	phoneStartupScreen:'img/phone_startup.png',
	tabletStartupScreen:'img/tablet_startup.png',
	launch:function(){
		var mainPanel = Ext.create('Ext.Panel',{
			id:'mainPanel',
			fullscreen:true,
			scrollable:'vertical',
			html:'Here is the text'
		});
		Ext.Viewport.add(formPanel);
	}
});

二、添加头像图片

1、定义img组件

<span style="white-space:pre">		</span>var img = Ext.create('Ext.Img',{
			src:'pic.png',
			width:100,
			height:100,
			cls:'pic'		
		});

2、通过cls设置位置,pic类代码卸载style里,让图片居中显示

.pic{
<span style="white-space:pre">	</span>margin:0 auto;
	margin-top:30px;
}

3、将图片组件添加到面板中

var mainPanel = Ext.create('Ext.Panel',{
			id:'mainPanel',
			fullscreen:true,
			scrollable:'vertical',
			items:[img]
		});

三、添加表单输入框

直接在mainPanel items中添加:

 
<span style="white-space:pre">				</span>items:[img,{
					xtype:'textfield',
					id:'username',
					name:'username',
					required:'true',
					placeHolder:'Please enter the username...',
					clearIcon:true
				},{
					xtype:'passwordfield',
					id:'password',
					name:'password',
					required:'true',
					placeHolder:'Please enter the password...',
					clearIcon:true		
				}]

注意:不同组件id名不能一样:否则只有第一个组件会生效,其他id相同的组件不显示

再给第一个输入框添加一个样式:cls:’inp’,用来与图片添加一些距离同时跟下一个输入框有一个分割线:

<span style="white-space:pre">		</span>.inp{
			margin-top:20px;
			border-bottom:2px solid #CCC;
		}

四、添加按钮

同理,同样的方法在items中编写按钮js代码

<span style="white-space:pre">				</span>{
					xtype:'button',
					text:'Log in',
					cls:'btn'	
				}

cls样式代码:

<span style="white-space:pre">		</span>.btn{
			height:50px;
			margin:0 auto;
			width:90%;
			background:#39F;
			color:white;
			margin-top:30px;
		}

以上就可以实现一个类似qq登录的简单界面了。通过一步一步实现,逐渐掌握Sencha Touch在实际应用中前端部分的基本思路,并且注意容易产生Bug的地方。

以上是关于HTML5开发实战——Sencha Touch篇的主要内容,如果未能解决你的问题,请参考以下文章

HTML5开发实战——Sencha Touch篇

HTML5开发移动web应用——Sencha Touch篇

HTML5开发移动web应用——Sencha Touch篇(12)

HTML5开发移动web应用——Sencha Touch篇

HTML5开发移动web应用——Sencha Touch篇(10)

我可以在没有 MAC 的情况下为 iOS 开发 Sencha Touch 应用程序吗?