脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5开发实战――Sencha Touch篇(1)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 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);  } });

   var img = Ext.create('Ext.Img',{    src:'pic.png',    width:100,    height:100,    cls:'pic'     });

 .pic{  margin:0 auto;  margin-top:30px; }

 var mainPanel = Ext.create('Ext.Panel',{    id:'mainPanel',    fullscreen:true,    scrollable:'vertical',    ITems:[img]   });

       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       }]

   .inp{    margin-top:20px;    border-bottom:2px solid #CCC;   }

     {      xtype:'button',      text:'LOG in',      cls:'BTn'      }

   .btn{    height:50px;    margin:0 auto;    width:90%;    background:#39F;    color:white;    margin-top:30px;   }

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5开发实战――Sencha Touch篇(1)全部内容，希望文章能够帮你解决html5教程-HTML5开发实战――Sencha Touch篇(1)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。