On/Off toggle buttom

[tomalex0]

Hi,

A small tweak in css gave me usual Toggle Button that we used to see in Iphone

Example

{
                        xtype: 'toggle',
                        name: 'single_toggle',
                        value : 1
                    }

Css

.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;
  }

[jay@moduscreate.com]

Is this a question? I'm confused.

[aconran]

tomalex0 is showing some custom styling to get iPhone style toggles.

[jay@moduscreate.com]

Cool. Moved to examples/showcases.


Should we offer an extensions forum?

[corvonero]

Cool. Moved to examples/showcases.


Should we offer an extensions forum?

ABSOLUTELY YES!!

[tomalex0]

Modified css compatible with 1.01a version

.x-field-toggle .x-slider {
        -webkit-border-radius: 0em;
        width:5.6em;
        height:1.6em;
        border: 0;
        
        
    }
  
    .x-field-toggle .x-slider.x-toggle-on {
      background: url(checkbox_on.png) no-repeat;
    }
    
    .x-field-toggle .x-slider.x-toggle-off {
        background: url(checkbox_off.png) no-repeat;
    }

    .x-field-toggle .x-thumb::before{
        -webkit-box-shadow:none;
        background-color:transparent;
        border:none;
        background-image:none;
    }

[AndreaCammarata]

Really nice tweak tomalex.

For Sencha team: Yes please activate a Sencha Ux forum, I was wondering if this was possible in a thread I open some weeks ago.
http://www.sencha.com/forum/showthre...-forum-section

[bbriot]

just a little message to indicate that :

xtype: 'toggle', line code, must be replace with this one :

xtype: 'togglefield',

And with this modification, it will work great with senchaTouch 1.1

[headkit]

is there a way where you could use the css3-background-gradients and adding a transparent PNG with the button state titles? maybe by adding one more <span>-tag to the togglefield?

[Gatoche]

Thanks for publishing, works great.
It's just what i was looking for.

Thanks a lot.