Sencha Touch 2 – Toggle buttons like in iOs

by
on October 11, 2012
(1 min 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.

I’ve got invites for a free bank transfer!

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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')}

Please donate to keep this server up

The JavaScript

No need to change anything, just a normal toggle:

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

Did you enjoy this article?

Buy the author a coffee 🤗☕

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 30€ discount