sencha touch实例：微博设置界面

最新推荐文章于 2024-08-21 22:53:13 发布

yxRosy

最新推荐文章于 2024-08-21 22:53:13 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/hellohm/article/details/23586417

版权

Sencha Touch 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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