Sencha Touch 2 – Toggle buttons like in iOs

by
on October 11, 2012
(1 minute read)

I’m developing an iPhone app here at work using PhoneGap/Cordova and Sencha Touch 2 and the default Toggle button is too big and very different from the iOS look and feel. So I’ve put together a piece of CSS you can copy and paste in your projects and will replace all the toggle buttons in Sencha. It shows great in retina display and the functionality is exactly the same as with the default Sencha Toggle.

Here’s a preview:

Sencha Touch 2 - Toggle field like iOS5 and iOS6

 

As you can see, the default iOS is not exactly the same as my approach since I wanted to keep the CSS code simple and short while still giving the user a nice and smooth User Experience so they are familiar with the element and its functionality.

To install it just copy and paste the code below into your CSS file. This code is for Sencha Touch version 2, for version 1 see here.

The CSS

.x-toggle {border:none;height:1.7em}
.x-thumb {height:1.7em;width:1.7em}
.x-toggle .x-thumb::before {left:0;top:0;}
.x-thumb::before {background-image: -webkit-linear-gradient(white,#CDCDCD 2%,#fff);background-image: linear-gradient(white,#CDCDCD 2%,#fff);height:1.7em;width:1.7em}
.x-toggle-on,.x-toggle-off {background-size:100% 100%;}
.x-toggle-on {background-image:url('data:image/png;base64,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');}

.x-toggle-off {background-image:url('data:image/png;base64,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')}

I’ve got invites for a free bank transfer!

The JavaScript

No need to change anything, just a normal toggle:

{
	xtype: 'togglefield',
	name: 'togglebutton',
	label: 'Toggle me!',
	value: 1
},

Looking for cool gift ideas? TrendLiker.com lists hundreds of nice items and lets you know when they go on sale on Amazon.

Did you enjoy this article?

Thank with a coffee ☕

Or help me out by clicking one of these buttons:

    
    

3 comments

  • Hektor says:

    Nice work!

    I tried it on my Chrome,seems malposition of thumb on the toggle

    btw, the toggle is not located in the center

  • Hektor says:

    after override the size and radius of thumb,it seems work perfect!

    .x-thumb:after {
    content: “”;
    position: absolute;
    width: 1.43em;
    height: 1.43em;
    top: 0.135em;
    left: 0.135em;
    border: 1px solid #919191;
    -webkit-border-radius: 0.715em;
    border-radius: 0.715em;
    background-image: none;
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(3%, #eaeaea), color-stop(100%, #d0d0d0));
    background-image: -webkit-linear-gradient(top, #ffffff, #eaeaea 3%, #d0d0d0);
    background-image: linear-gradient(top, #ffffff, #eaeaea 3%, #d0d0d0);
    -webkit-background-clip: padding;
    background-clip: padding-box;
    }

  • Raviraj Kakade says:

    Nice… Xavi.. it’s work fine

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 25€ discount