Question

如何在Sencha Touch List Item中添加一个Button

Answer 1

实现的方式不难无非是样式的中optical的使用。

1.首先定义css

.search-item .delete {
float: right;
color:
white;
font-size: 0.7em;
padding: 5px 8px;
border-color:
#555;
background-color:
red;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,
#FF4D4D), color-stop(50%,
#FF1A1A), color-stop(51%,
red), color-stop(100%,
#E60000));
background-image: linear-gradient(
#FF4D4D,
#FF1A1A 50%,
red 51%,
#E60000);
}

.search-item{width:100%}
.search-item .action{opacity:0}
.search-item-active .search-item .action{opacity:1;-webkit-transition:opacity 0.3s linear}

2.在list中定义itemtpl

itemTpl: [
'<div class="search-item">',
'<div class="action delete x-button">Delete</div>',
'<span>{aaa}</span>',
'</div>'
]

3.在事件中定义显示的操作（activeCls: 'search-item-active'）

deactivateAll: function() {
Ext.select('div.search-item', this.element.dom).removeCls(this.activeCls);
},
onItemSwipe: function(me,target,index,record,e,eOpts) {
var el = Ext.get(target),
activeCls = this.activeCls,
hasClass = el.hasCls(activeCls);

this.deactivateAll();

if (hasClass) {
el.removeCls(activeCls);
} else {
el.addCls(activeCls);
}
}
最后可以在swipe（滑动手势下）使这个button显示或者消失了。