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: 0;
top: 0;
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重写。