Sencha Touch 2 – Toggle buttons like in iOs 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 […]

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.

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

Things I’m buying on Amazon this week

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? Read it better on

🦁 Brave, the free Chrome alternative that doesn't track you

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