HTML5 development practices-Sencha Touch (1)

HTML5 development practices-Sencha Touch (1)

I have learned a lot of basic Sencha Touch content and have learned about the development mode of Sencha Touch. Next, we will use Sencha Touch to build our web application. The first thing to solve is the front-end problem, starting with the simplest, a basic logon interface.

The simplest logon interface consists of the following elements: user profile, user name, password, and submit button. We start from this simple interface and gradually implement the interface.

 

1. Create a main panel

 

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

 

2. Add an avatar Image

1. Define the img component

 

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

 

2. Set the location through cls, and unmount the style in the pic code so that the image is displayed in the center.

 

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

 

3. Add the image component to the Panel.

 

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

 

3. Add a form input box

Add the following directly in items of mainPanel:

 

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

 

Note: Different Component IDs cannot be the same: otherwise, only the first component will take effect, and components with the same id will not be displayed.

Add a style cls: 'p1' to the first input box, which is used to add some distance from the image and to split the line with the next input box:

 

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

 

4. Add button

Similarly, you can write button js Code in items in the same way.

 

{xtype:'button',text:'Log in',cls:'btn'}

 

Cls style code:

 

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

The above provides a simple interface similar to qq logon. By step-by-step implementation, You can gradually master the basic idea of the front-end part of Sencha Touch in actual applications, and pay attention to the Bug-prone areas.