ExtJS On/Off Button - button

Question

I want to create mobile like on/off button with extjs in my web application. I couldn't find any sample or solution for this. I want actually like this: 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");
});
});​
How can I do this with ExtJS?

Answer 1

Just a quick one which can easily extended to a full component:
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');
}
})​;​
Here's a JSFiddle