sencha touch list css(样式) 详解
1 /* 2 *自定义列表页面 3 */ 4 Ext.define('app.view.util.MyList', { 5 alternateClassName: 'myList', 6 extend: 'Ext.List', 7 xtype: 'myList', 8 requires: ['Ext.plugin.ListPaging', 'Ext.plugin.PullRefresh'], 9 config: { 10 cls: 'list', 11 plugins: [{ 12 xclass: 'Ext.plugin.ListPaging', 13 autoPaging: true, 14 noMoreRecordsText: '没有更多内容了', 15 loadMoreText: '加载更多...' 16 }, 17 { 18 xclass: 'Ext.plugin.PullRefresh', 19 lastUpdatedText: '上次刷新时间：', 20 loadingText: '加载中...', 21 pullRefreshText: '下拉可以手动刷新', 22 releaseRefreshText: '松开可以刷新', 23 refreshFn: function (loaded, arguments) { 24 loaded.getList().getStore().loadPage(1); 25 } 26 }], 27 //禁用，防止跳转时页面卡顿，且可以统一提示信息 28 loadingText:false, 29 emptyText: '没有更多内容了' 30 } 31 });
1 .x-list { 2 position: relative; 3 background-color: #f7f7f7; 4 overflow: hidden; 5 }
以上是x-list的默认属性，需要关注的是background-color，他决定整个list的背景色。
如果要自定义背景色，css应该这样写
1 .list{ 2 background-color: red;
3 }
效果如下：
每一行都应用了一个样式x-list-item，不过一般我们并不重写它的css。
1 .x-list .x-list-item { 2 position: absolute !important; 3 left: 0; 4 top: 0; 5 color: #000; 6 width: 100%; 7 }
通过重写，实现自定义按下效果
1 .x-list .x-list-item.x-item-pressed .x-dock-horizontal { 2 background-image:none; 3 background-color:#6F747A; 4 color:White; 5 }
效果如下：
同理，如果想自定义选中效果。则如下
1 .x-list .x-list-item.x-item-selected .x-dock-horizontal { 2 background-image:none; 3 background-color:Yellow; 4 color:Green; 5 }
如图：
如上图，按下和选中是不同的效果。根据需求自行设计
另外还有两个比较特殊的样式
.x-list .x-list-item-first以及.x-list .x-list-item-last，他们分别决定第一行和最后一行的css
以下是最后一行选中时的写法，其他的请举一反三
1 .x-list .x-list-item-last.x-item-selected .x-dock-horizontal 2 { 3 border-bottom:1px solid #dedede; 4 }
通过审查元素可以看见元素本身的样式，然后自定义css重写。
