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

效果：

Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。

 

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

1.首先定义css

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

.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.3 s linear}

 

2.在list中定义itemtpl

?

1 2 3 4 5 6

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

 

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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显示或者消失了。