学习了很多主要的Sencha Touch内容，已经了解了Sencha Touch的开发模式。接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建。
先要解决的是前端的问题。从最简单的入手。一个主要的登录界面。
最简单的登录界面大体由下面介个元素组成：用户头像部分、username输入部分、password输入部分、提交button。
我们从这样的虽简单的界面開始，逐步进行界面实现。
一、创建主面板
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;
}四、加入button
同理，相同的方法在items中编写buttonjs代码
<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在实际应用中前端部分的基本思路。而且注意easy产生Bug的地方。