Hi,

I got few feedbacks regarding earlier implementaion if it can be done using CSS3.
So tried to implement ios toggle field with using CSS3 techniques. I think i'm almost got it right

css techniques are shared from http://development.tobypitman.com/ip...eckboxes2.html

I have not done much change in exisiting togglefield i just added a functionality to change the state text.
I thought to kept it as a separate component.

You may also find bit odd as the State text are specified in the thumb itself. I think there areas where we can better the way CSS are laid out, feel free to inform me if it can be written in a better way.

Features
Look and feel of ios toggle field with CSS3
Custom text for min and max state (I have not tackled the issue if text is long)


Main IosToggleField
Code:
/**
 * @class Ext.form.iosToggle
 * @extends Ext.form.Toggle
 * <p>Specialized Slider with a single thumb and only two values. By default the toggle component can
 * be switched between the values of 0 and 1.</p>
 * @xtype iostogglefield
 */
Ext.form.iosToggle = Ext.extend(Ext.form.Toggle, {
    
    /**
     * @cfg {String} minValueCls CSS class added to the field when toggled to its minValue
     */
    minValueCls: 'x-iostoggle-off',


    /**
     * @cfg {String} maxValueCls CSS class added to the field when toggled to its maxValue
     */
    maxValueCls: 'x-iostoggle-on',
    
    /**
    * @cfg {String} minText default text for minValue
    */
    minText : 'OFF',
    
    /**
    * @cfg {String} maxText default text for maxValue
    */
    maxText:'ON',
   
    // inherit docs
    setValue: function(value) {
        Ext.form.iosToggle.superclass.setValue.call(this, value, this.animationDuration);


        var fieldEl = this.fieldEl,thumbText;
        if (this.constrain(value) === this.minValue) {
            fieldEl.addCls(this.minValueCls);
            fieldEl.removeCls(this.maxValueCls);
            thumbText = this.minText;
        }
        else {
            fieldEl.addCls(this.maxValueCls);
            fieldEl.removeCls(this.minValueCls);
            thumbText = this.maxText;
        }
         Ext.get(this.el.query(".x-toggle-thumb-iosthumb")[0]).update(thumbText);
    },
    getThumbClass: function() {
        return Ext.form.Toggle.iosThumb;
    }
});


Ext.reg('iostogglefield', Ext.form.iosToggle);
ios thumb
Code:
/**
 * @class Ext.form.Toggle.iosThumb
 * @extends Ext.form.Slider.Thumb
 * @private
 * @ignore
 */
Ext.form.Toggle.iosThumb = Ext.extend(Ext.form.Slider.Thumb, {
    onRender: function() {
        Ext.form.Toggle.iosThumb.superclass.onRender.apply(this, arguments);
        Ext.DomHelper.append(this.el, [{
            cls: 'x-toggle-thumb-iosthumb'
        }]);
    }
});
CSS
Code:
.x-toggle-thumb-iosthumb{
    position:relative;
    margin:0.38em 0 0 0;
    text-align:center;
}


.x-iostoggle-on .x-toggle-thumb-iosthumb{
    color:white;
    text-shadow:0px 0px 2px rgba(0, 0, 0, 0.6);
}


.x-iostoggle-off .x-toggle-thumb-iosthumb{
    position:relative;
    margin:0.38em 0 0 0;
    text-align:center;
    text-shadow:0px 0px 2px #F4F4F4;
}


.x-field-toggle .x-slider.x-iostoggle-off, .x-field-toggle .x-slider.x-iostoggle-on{
    display: block;
    margin-bottom: 20px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #555555;
    width: 80px;
    position: relative;
    height: 32px;  
}


.x-field-toggle .x-slider.x-iostoggle-off{
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
}


.x-field-toggle .x-slider.x-iostoggle-on{
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#white));
}


.x-iostoggle-off .x-thumb::before, .x-iostoggle-on .x-thumb::before {
    content: "";
    position: absolute;
    width: 2.2em;
    height: 1.650em;
    top: 0em !important;
    left: 0em !important;
    -webkit-border-radius: 0.925em;
    border-radius:3px;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}
.x-iostoggle-off .x-thumb::before {
    border:1px solid #E5E5E5;
    background-color: white;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(white));
    background-image: linear-gradient(white,#A1A1A1 2%,#white);
}


.x-iostoggle-on .x-thumb::before {
    border:1px solid #1C60A5;
    background-color: #14539C;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
    background-image: linear-gradient(white,#14539C 2%,#3095C7);
}
How to use

Code:
{
                        xtype: 'iostogglefield',
                        name : 'enable'
                        label: 'Security Mode',
            minText : 'M',
            maxText : 'F'
                    }

Code:
{
                        xtype: 'iostogglefield',
                        name : 'enable'
                        label: 'Security Mode'
                    }