Toggle Button IOS Style with EXTJS

For a recent project I had the need for a toggle button, similar to the styling in IOS (iPhones, iPads etc.) This was the end result.

image of toggle button

Source Code here

Following are the highlights

  • you can define the labels.
  • you can define the function to call when the toggle button is changed.
  • indicate currently if the toggle button is on / off.
  • override the default animation length of 500ms.
  • create a hidden form field usseful for submitting an entire form panel.
  • a getValue function returning the current value.

Sample Usage

Ext.create("Ext.container.Container", {
    renderTo : "simpleDiv",
    width   : 400,
    height  : 300,
    items   : [
        {xtype : "coretogglebutton", 
        id: "x", 
        listeners : 
            { togglechanged : 
            function (newValue {
                console.log(newValue.newValue)
                }
            }
           },
        {xtype : "coretogglebutton", 
        id: "y", 
        coreConfig : {
        toggleType : 'Y', 
        enableHiddenFormField : true,             hiddenFieldName : "p_toggleOne"
        }, 
        listeners : { 
        togglechanged : function (newValue) {
            console.log(newValue)}
        }},
        {xtype : 
        "coretogglebutton", 
        coreConfig : {
        toggleType : 0, 
        labels : {on :"YA", off: "Nope"}}}
    ]
});
}