Scroll Top

Toggle Button In ExtJS



I recently had the opportunity to work on a project for a new web application on the ExtJS framework. In the project, we needed a toggle button similar to the style of Sencha Touch. During the development, we learnt that we could build a similar toggle button using the Ext.slider.Single class. However, there are several steps involved to achieve the functionality and I thought it would be worth sharing with the developers to manage during their development. This article will provide you with steps on how we can build a toggle button in ExtJS.

How to get it ?

The component is available on Sencha Fiddle, You may try the code on Sencha Fiddle.

Getting ready

First, get the below things in place –

  1. ExtJS  5.x
  2. Sencha Cmd 5.x
  3. Images.





The Toggle Button has been implemented as a custom ExtJS component. The component extends the Ext.slider.Single class and provides the option to the user to select toggle as ON/OFF.

How to do it

Following are the steps:

Step 1: Create an ExtJS app, To create an ExtJS app follow the below link

Creating a new ExtJS app

Step 2: Define a new class in your application and extend the class with “Ext.slider.Single”, while giving the alias name as togglebutton.

We would be using “Ext.slider.Single” class as this is closer to meet our expectations. The toggle button feature can be easily achieved by using the existing config and by adding a few CSS.

Single slider class can accept more than one value as an array, in our extended class we are providing the single value as 0 and maxValue to 1, so the slider will always get the nearest thumb.

Follow the following code –

In the next step, we will write the CSS to change the design of the slider.

Step 3: Adding CSS.

A developer can design their own images with a preferable color to meet the requirements.

In the below CSS we will use the above designed images.

How it works

Now toggle button component is available to use as xtype.

To use the toggle button in your application, create a form panel and add toggle button in form panel items.

See the below code:


In this article, you learned about “how to create and use a toggle button component” in ExtJS by extending the Ext.slider.Single class. Hope you found this helpful.


Related Posts

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.