学习了许多基本的Sencha Touch内容，已经 了解 了Sencha Touch的 开发模式 。接下来一段时间我们将 利用 Sencha Touch来进行自己的web应用构建。先要解决的是前端的问题，从最 简单 的入手，一个基本的登录界面。
最简单的登录界面大体由以下介个元素组成： 用户头像 部分、用户名输入部分、密码输入部分、提交按钮。我们从这种虽简单的界面 开始 ， 逐步 进行界面实现。
&nbs p;
一、创建主面板
Ext.require(& # 39;Ext.Panel'); Ext.application({ n am e:' ;m yApp', icon:'image/icon.png', glossOnIcon:false, phoneStartupScreen:' img /phone_startup.png', tabletStartupScreen:'img/tablet_startup.png', launch:function(){ VAR m ai nPanel = Ext.create('Ext.Panel',{ id:'mainPanel', fullscreen:true, scrollable:'vert ical ', ht ML :'Here is the text' }); Ext.Viewport.add(formPanel); } });
二、添加 头像 图片
1、定义img组件
var img = Ext.create('Ext.Img',{ src:'pic.png', width:100, h ei ght:100, cls:'pic' });
2、通过cls设置位置，pic类代码卸载style里，让图片居中显示
.pic{ m arg in:0 auto; mar gin -t op:30px; }
3、将图片组件添加到面板中
var mainPanel = Ext.create('Ext.Panel',{ id:'mainPanel', fullscreen:true, scrollable:'vertical', IT ems:[img] });
三、添加表单输入框
直接在mainPanel 的items中添加：
items:[img,{ xty PE :'textfield', id:'username', name:'username', requi red :'true', placeHolder:'Please enter the username .. .', clearIcon:true },{ xtype:'passwor DF ield', 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:' BT n' }
cls样式代码：
.btn{ height:50px; margin:0 auto; width:90%; background:#39F; color:white; margin-top:30px; } 以上就可以实现一个类似 QQ登录 的简单界面了。通过一步一步实现，逐渐掌握Sencha Touch在实际应用中前端部分的基本思路，并且注意容易产生Bug的地方。
学习了许多基本的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的地方。
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5开发实战――Sencha Touch篇(1) 全部内容，希望文章能够帮你解决 html5教程-HTML5开发实战――Sencha Touch篇(1) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5开发实战――Sencha Touch篇(1)的详细内容...