sencha touch实例：微博设置界面

参考文章：Sencha Touch开发实例：新浪微博iPhone界面

通过对sencha touch中Ext.dataview.List设置css得到如下的效果：



1.根据上一篇《sencha touch初步》新建一个sencha touch项目，在项目目录resources/css下新建一个空的main.css文件，然后打开项目目录下的app.json，找到css设置修改如下

"css": [
{
"path": "resources/css/app.css",
"update": "delta"
},
{
"path": "resources/css/main.css",
"update": "delta"
}
],

2.在项目目录下运行命令sencha app build，这样main.css才能生效。

3.在app/view/main.js中新建一个Ext.dataview.List，并配置其css属性。

Ext.define('weiboset.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.dataview.List'
],
config: {
layout: 'fit',
items: [
{
xtype: 'list',
cls: 'list2',
ui: 'round',
scroll: false,
margin: '10 15 10 15',
itemTpl: '<tpl if="needsIcon"><img width="26" height="26" src='+
'"resources/images/{icon}.png" align="absmiddle" /></tpl>{name}',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'icon', 'needsIcon'],
data: [
{"name" : "直接登录","icon":'login',"needsIcon":true},
{"name" : "找回密码","icon":'password',"needsIcon":true},
{"name" : "声音提示","icon":'sound',"needsIcon":true},
{"name" : "关于我们","icon":'version',"needsIcon":false},
{"name" : "问题反馈","icon":'question',"needsIcon":true},
{"name" : "客服电话","icon":'phone',"needsIcon":true},
{"name" : "软件版本0.92","icon":'version',"needsIcon":true}
]
})
}
]
}
});


4.在main.css中增加以下css代码，用来设置每个数据项的位置以及风格。
.list2 {
-webkit-border-radius : 10px;
font-size:.9em;
}
.list2 .x-list-item {
background-color : #FFF;
border:1px solid silver;
-webkit-border-radius : 10px;
}
.list2 img {
margin-right:10px;
}
.list2 .x-list-item.x-item-selected .x-dock-horizontal, .x-list .x-list-item.x-item-pressed .x-dock-horizontal, .x-list .x-list-item.x-item-selected.x-list-item-tpl {
background-image: none;
background-color: #bbefcf;
border-color: silver;
color: #000;
}

.list2 .x-list-item:nth-of-type(3) {
margin : 0 0 15px 0;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
.list2 .x-list-item:nth-of-type(4) {
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
}
.list2 .x-list-item:nth-of-type(5) {
border-top:0px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
}
.list2 .x-list-item:nth-of-type(6) {
margin : 15px 0 0 0;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
}
.list2 .x-list-item:nth-of-type(7) {
border-top:0px;
-webkit-border-radius:0px;
}
.list2 .x-list-item:nth-of-type(8) {
border-top:0px;
margin : 0 0 15px 0;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
}
.list2 .x-item-selected:last-child {
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}此处css是利用radius属性对每个list项的四个角设置圆角效果。