HTML5开发实战——Sencha Touch篇(1)
学习了很多主要的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的地方。
HTML5开发实战——Sencha Touch篇(1)的更多相关文章
- HTML5开发移动web应用——Sencha Touch篇(7)
Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.D ...
- HTML5开发移动web应用——Sencha Touch篇(8)
DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...
- HTML5开发移动web应用——Sencha Touch篇(10)
我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...
- 移动端HTML5开发问题汇总-样式篇
问题:Android 上圆形图片使用 border 时,边框显示变形 解决:给 img 外嵌套一个元素,为其使用圆角 <div> <img src=""> ...
- iOS开发——实战总结OC篇&网易彩票开发知识点总结
网易彩票开发知识点总结 关于网易彩票开发中遇到了不少的坑,弄了好久才弄懂,或者有些犹豫很久没用就不记得了,所以这里就总结了一下,希望以后不会忘记,就算忘记也能快速查看! /************** ...
- [Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题
之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程 ...
- 移动端H5页面编辑器开发实战--经验技巧篇
很久前的写的文章了,转载下发到这里 原本地址: https://blog.csdn.net/tech_meizu/article/details/52484775
- 【翻译】使用Sencha Touch开发Google Glass应用程序
原文:Developing for Google Glass with Sencha Touch 作者:Ross Gerbasi Ross Gerbasi is a Senior Engineer a ...
- Sencha Touch 实战开发培训 视频教程 第二期 基础提高篇 预告
“抛砖网”国内首家首创纯实战型培训机构,提供在线培训.技术指导及答疑! 团队通过360全方位技术培训+1度手把手技术指导,保证每一个学员能最快掌握实际工作技能: 让每一个学员都能站在我们的肩膀上,展翅 ...
随机推荐
- java反编译工具jad
下好以后解压就可以用了,软件就只有一个exe文件和一个帮助文件.在众多的JAVA反编译工具中,有几种非常著名的工具使用了相同的核心引擎——JAD,其中主要包括:FrontEnd Plus.mDeJav ...
- Python爬虫-爬取京东商品信息-按给定关键词
目的:按给定关键词爬取京东商品信息,并保存至mongodb. 字段:title.url.store.store_url.item_id.price.comments_count.comments 工具 ...
- Python 模块学习(一)
一.时间模块 import time # 模块调用语句 注意:模块级导入一般放在文件顶部 import datetime print(time.time()) # 1550411181.441547: ...
- 对于easyui $.messager.alert和 $.messager.confirm 不同浏览器中位置控制
$.messager.confirm({ title: '种子购买', msg: '确定购买这个'+seedName+'的种子嘛?', top:, fn: function (r) { if (r){ ...
- 大数据学习——hive安装部署
1上传压缩包 2 解压 tar -zxvf apache-hive-1.2.1-bin.tar.gz -C apps 3 重命名 mv apache-hive-1.2.1-bin hive 4 设置环 ...
- MQ报错java.lang.IllegalStateException: Failed to load ApplicationContext
这个问题是jdk版本造成的,把jdk1.8换成jdk1.7问题就解决了
- Linux(Centos6.5)+Nginx+PHP-fpm+Mysql配置
第一步:准备安装包 1.从[](http://nginx.org/en/download.html).下载nginx 源码包 //NOTE! 下载稳定版本 2.从[](http://php.net/d ...
- HackerRank# Wet Shark and Two Subsequences
原题地址 对于给定的两个约束条件,可以通过联立方程组直接解出子序列A的和和子序列B的和,即sum(A) = (r + s) / 2,sum(B) = (r - s) / 2,假设|A|=|B|=n 所 ...
- bzoj2190 [SDOI2008]仪仗队 - 筛法 - 欧拉函数
作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图). ...
- 【BZOJ3295】动态逆序对(BIT套动态加点线段树)
题意:对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数. 给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序对 ...