Nút bật/tắt ExtJS

Question

Tôi muốn tạo nút bật/tắt trên thiết bị di động với các extj trong ứng dụng web của mình. Tôi không thể tìm thấy bất kỳ mẫu hoặc giải pháp cho việc này. Tôi muốn thực sự như thế này: Demo

CSS

/* 
    Created by @JohnieHjelm. I took the liberty of doing this ON/OFF switch 
    just to express my love for CSS3. You're free to use this and of course 
    I hoped you learned something. Sharing is Caring♥ 
*/ 

body{ 
    background:#eee; 
} 

ul{ 
    list-style:none; 
    width:85px; 
    height:26px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-13px 0 0 -42px; 
} 

ul li{ 
    float:left; 
    line-height:23px; 
    font-size:11px; 
    padding:2px 10px 0; 

    background: #E5E5E5; 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F3F3), to(#E5E5E5)); 
    text-shadow:0 1px 0 #FFF; 
    border-left:1px solid #D5D5D5; 
    border-top:1px solid #D5D5D5; 
    border-bottom:1px solid #D5D5D5; 
    -webkit-box-shadow:0 1px 0 #FFF inset, 0 0 5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .3); 
} 

ul li:first-child{ 
    -webkit-border-radius:5px 0 0 5px; 
} 
ul li:last-child{ 
    -webkit-border-radius:0 5px 5px 0; 
} 

ul li a{ 
    text-decoration: none; 
    font-family:Helvetica, Arial; 
    text-transform:uppercase; 
    color:#a1a1a1; 
} 

.on{ 
    background: #505050; 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#777), to(#505050)); 
    text-shadow:0 -1px 0 #444, 0 0 7px #9AE658; 
    border-right:1px solid #444; 
    border-top:1px solid #444; 
    border-bottom:1px solid #444; 
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .7) inset, 0 1px 0 #FFF; 
} 

ul li:not(.on):active{ 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#f1f1f1)); 
} 


ul li.on a{ 
    color:#7BBA47; 
    cursor: default; 
}​ 

jQuery

$(function(){ 
    $("ul li").click(function(){ 
     $("ul li").removeClass("on"); 
     $(this).addClass("on"); 
    }); 
});​ 

Làm thế nào tôi có thể làm điều này với ExtJS?

Answer 1

Chỉ cần một cách nhanh chóng mà có thể dễ dàng mở rộng đến một thành phần đầy đủ:

Ext.get(Ext.query("ul li")).on('click', function(e, t, eOpts) { 
    var el = Ext.get(this),p; 
    el.addCls("on"); 
    if((p = el.next())) { 
     p.removeCls("on"); 
     alert('can fire turn OFF'); 
    } else if ((p = el.prev())){ 
     p.removeCls("on"); 
     alert('can fire turn ON'); 
    } 
})​;​ 

Dưới đây là một JSFiddle