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开发移动web应用——Sencha Touch篇(12)