HTML5开发实战——Sencha Touch篇

ntap0780 8年前

来自: http://blog.csdn.net/fareise/article/details/50651557

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