html5 sencha,HTML5开发实战——Sencha Touch篇(1)

学习了许多基本的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

var img = ext.create('ext.img',{

src:'pic.png',

width:100,

height:100,

cls:'pic'

});

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

.pic{

margin:0 auto;

margin-top:30px;

}

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

var mainpanel = ext.create('ext.panel',{

id:'mainpanel',

fullscreen:true,

scrollable:'vertical',

items:[img]

});

三、添加表单输入框

直接在mainpanel 的items中添加：

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’，用来与图片添加一些距离同时跟下一个输入框有一个分割线：

.inp{

margin-top:20px;

border-bottom:2px solid #ccc;

}

四、添加按钮

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

{

xtype:'button',

text:'log in',

cls:'btn'

}

cls样式代码：

.btn{

height:50px;

margin:0 auto;

width:90%;

background:#39f;

color:white;

margin-top:30px;

}

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