Hybrid View

  1. #1
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default On/Off toggle buttom

    On/Off toggle buttom


    Hi,

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

    Example
    Code:
    {
                            xtype: 'toggle',
                            name: 'single_toggle',
                            value : 1
                        }
    Css

    Code:
    .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;
      }
    Attached Images

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Is this a question? I'm confused.

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,249
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    tomalex0 is showing some custom styling to get iPhone style toggles.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Cool. Moved to examples/showcases.


    Should we offer an extensions forum?

  5. #5
    Sencha User
    Join Date
    Dec 2007
    Posts
    115
    Vote Rating
    12
    corvonero will become famous soon enough

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    Cool. Moved to examples/showcases.


    Should we offer an extensions forum?
    ABSOLUTELY YES!!

  6. #6
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Modified css compatible with 1.01a version

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

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    119
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


    Quote Originally Posted by jay@moduscreate.com View Post
    Cool. Moved to examples/showcases.


    Should we offer an extensions forum?
    YES you TOTALLY should

Similar Threads

  1. Autoload Refresh when Click the Buttom
    By footballermahesh in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 8 Oct 2009, 7:28 PM
  2. (SOLVED) scroll dataview automatically to the buttom
    By robin30 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 21 Feb 2009, 3:06 PM
  3. in layout column to put button to buttom
    By emredagli in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 Aug 2008, 2:35 AM
  4. add tab from a link or a buttom
    By simpaulguy in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 29 Dec 2006, 11:37 AM

Thread Participants: 14