sencha touch list css(样式) 详解

 /*
 *自定义列表页面
 */
 Ext.define('app.view.util.MyList', {
     alternateClassName: 'myList',
     extend: 'Ext.List',
     xtype: 'myList',
     requires: ['Ext.plugin.ListPaging', 'Ext.plugin.PullRefresh'],
     config: {
         cls: 'list',
         plugins: [{
             xclass: 'Ext.plugin.ListPaging',
             autoPaging: true,
             noMoreRecordsText: '没有更多内容了',
             loadMoreText: '加载更多...'
         },
         {
             xclass: 'Ext.plugin.PullRefresh',
             lastUpdatedText: '上次刷新时间：',
             loadingText: '加载中...',
             pullRefreshText: '下拉可以手动刷新',
             releaseRefreshText: '松开可以刷新',
             refreshFn: function (loaded, arguments) {

                 loaded.getList().getStore().loadPage(1);
             }
         }],
         //禁用，防止跳转时页面卡顿，且可以统一提示信息
         loadingText:false,
         emptyText: '没有更多内容了'
     }
 });

 .x-list {
 position: relative;
 background-color: #f7f7f7;
 overflow: hidden;
 }

以上是x-list的默认属性，需要关注的是background-color，他决定整个list的背景色。

如果要自定义背景色，css应该这样写

 .list{
 background-color: red;
 }

效果如下：

每一行都应用了一个样式x-list-item，不过一般我们并不重写它的css。

 .x-list .x-list-item {
 position: absolute !important;
 left:;
 top:;
 color: #000;
 width: 100%;
 }

通过重写，实现自定义按下效果

 .x-list .x-list-item.x-item-pressed .x-dock-horizontal {
     background-image:none;
     background-color:#6F747A;
     color:White;
 }

效果如下：

同理，如果想自定义选中效果。则如下

 .x-list .x-list-item.x-item-selected .x-dock-horizontal {
     background-image:none;
     background-color:Yellow;
     color:Green;
 }

如图：

如上图，按下和选中是不同的效果。根据需求自行设计

另外还有两个比较特殊的样式

.x-list .x-list-item-first以及.x-list .x-list-item-last，他们分别决定第一行和最后一行的css

以下是最后一行选中时的写法，其他的请举一反三

 .x-list .x-list-item-last.x-item-selected .x-dock-horizontal
 {
     border-bottom:1px solid #dedede;
 }

通过审查元素可以看见元素本身的样式，然后自定义css重写。