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"}}}
	]
});
}