我要评论学习了许多基本的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的地方。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论