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重写。