HTML5支出实战——Sencha Touch篇(2)
诚如的应用程式,页面包车型客车主干布局都以雷同的,上边是多少个tab,用来张开选取以完结页面切换的成效。点击差别的按键,分界面就能够切换成分歧的内容。Sencha Touch中得以非常轻便的进展那样的操作。
首先,大家要鲜明大家在此边要运用TabPanel创立。看名就可见意思,该器件在分界面包车型地铁穷奢极欲加多tab况兼能够由此tab举办页面切换。幼功代码如下:
launch:function(){
Ext.Viewport.add({
Xtype:’tabpanel’,//选择tabpanel作为主面板
tabBarPosition:’bottom’,//该属性设定tab的位置
items:[
//定义页面主题内容
{
title:’Home’,
iconCls:’home’,
cls:’home’,
html:[//这里写html页面主题部分代码].join(“”)
},
//……]
});
}
大家来动脑一下Sencha Touch中该器件的特征,定义了该器件后,能够由此tabBarPosition来设定tab所在的任务。常常景观下都在尾部。接下来,大家能够经过items来定义TabPanel中所包蕴的内容。每定义一个items,其实不仅仅定义了tab开关的源委,也定义了它对应的页面的内容。
以地点的代码为例,我们今日概念了二个title为Home的tab,同期还为它设定了icon。此中的html属性里面包车型大巴内容,写的便是tab页面内的剧情。能够直接行使正规的html代码编写,也足以顺便CSS样式等。它和tab这些相应的按键是绑定在一块的。通过这种格局大家得以定义多个tab分界面,也就重新组合了整整app的骨干框架。
在平常的支出中,为了让开垦的进程越发清晰轻易,我们得以四个三个分界面来写,最后再把它们加到三个分界面中,落成大家想要的法力。
Touch篇(2) 日常的应用软件,页面包车型大巴中央布局都是意气风发律的,上边是多少个tab,用来实行选用以高达页面切换的功效。点击分化的...
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相近的零器件不出示
再给第4个输入框增多三个体裁: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的地点。
Touch篇(1) 学习了许十核心的Sencha Touch内容,已经明白了Sencha Touch的花费形式。接下来豆蔻梢头段时间咱们将选取Sencha Touch来...
编辑:计算机网络 本文来源:HTML5花销实战
关键词: