sencha touch list css(样式) 详解

来源：互联网发布：木木聊天软件编辑：程序博客网时间：2024/05/16 06:08

 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-horizontal2 {3     border-bottom:1px solid #dedede;4 }

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