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

[Sasha172]

Cool. Moved to examples/showcases.


Should we offer an extensions forum?

YES you TOTALLY should