sencha touch实例：微博设置界面

来源：互联网发布：知乎 let it go 编辑：程序博客网时间：2024/05/23 22:15

参考文章：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项的四个角设置圆角效果。

0 0