Hi,
A small tweak in css gave me usual Toggle Button that we used to see in Iphone
Example
Code:
{
xtype: 'toggle',
name: 'single_toggle',
value : 1
}
Css
Code:
.x-field-toggle .x-slider {
-webkit-border-radius: 0em;
-webkit-box-shadow: inset rgba(0, 0, 0, 0) 0 0 0;
}
.x-field-toggle .x-slider .x-field-thumb:after {
position: absolute;
width: 2.5em;
height: 2.5em;
top: 0;
left: 0;
-webkit-box-shadow: rgba(0, 0, 0, 0) 0 0 0em;
-webkit-border-radius: 0em;
-webkit-transform: scale(0);
border: none;
background:none;
overflow: visible;
z-index: 2;
}
.x-field-toggle .x-slider.x-toggle-on {
-webkit-appearance: none;
background: url(checkbox_on.png);
width: 94px;
height: 27px;
border: 0;
float: left;
margin: 8px 4px 0 5px;
}
.x-field-toggle .x-slider.x-toggle-off {
-webkit-appearance: none;
background: url(checkbox_off.png);
width: 94px;
height: 27px;
border: 0;
float: left;
margin: 8px 4px 0 5px;
}