通過對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"
    	}
    ],
 

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

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