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,353
    Vote Rating
    79
    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,198
    Vote Rating
    119
    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,353
    Vote Rating
    79
    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 - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  8. #8
    Sencha User
    Join Date
    Sep 2010
    Location
    Lausanne / Switzerland - French Part
    Posts
    2
    Vote Rating
    0
    bbriot is on a distinguished road

      0  

    Default little refactoring on tomalex0 sample code

    little refactoring on tomalex0 sample code


    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

  9. #9
    Sencha User
    Join Date
    Feb 2011
    Posts
    104
    Vote Rating
    0
    headkit is on a distinguished road

      0  

    Default


    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?

  10. #10
    Sencha User
    Join Date
    Jul 2011
    Location
    France
    Posts
    1
    Vote Rating
    0
    Gatoche is on a distinguished road

      0  

    Cool Simple but nice tweak

    Simple but nice tweak


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

    Thanks a lot.

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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi