HTML5开发实战――Sencha Touch篇(1)

时间2024-01-26 18:09:03发布访客分类HTML浏览694

导读：收集整理的这篇文章主要介绍了html5教程-HTML5开发实战――Sencha Touch篇(1 ，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。...

收集整理的这篇文章主要介绍了html5教程-HTML5开发实战――Sencha Touch篇(1)，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

学习了许多基本的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的地方。