Toggle Button In ExtJS


Final

Motivation

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 the 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 steps on how we can build 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.

ToggleOnToggleOffCircle

 

 

Features

The Toggle Button has been implemented as a custom ExtJS component. The component extends the Ext.slider.Single class and provides 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 ExtJS app follow the below link

Creating 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 array, in our extended class we are providing the single value as 0 and maxValue to 1, so slider will always get the nearest thumb.

Follow the following code –

Ext.define('MyApp.view.Toggle', {
    extend: 'Ext.slider.Single',
    alias: 'widget.togglebutton',
    config: {
 defaultBindProperty: 'value'
    },
    cls: 'toggleoff',
    width: 10,
    value: 0,
    animate: false,
    maxValue: 1,
    initComponent: function () { 
 this.callParent();
    },
   getValue: function () {
        var toggleValue = this.thumbs[0].value;
        if (toggleValue === 1) {
            this.removeCls('toggleoff');
            this.addCls('toggleon');
        } else {
            this.removeCls('toggleon');
            this.addCls('toggleoff');
        }
        return this.callParent([0]);
    },
    listeners: {
        afterRender: function (toggle) {
            var toggleValue = toggle.thumbs[0].value;
            if (toggleValue === 1) {
                this.removeCls('toggleoff');
                this.addCls('toggleon');
            }
        }
    }
});

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

Step 3: Adding CSS.

Developer can design their own images with preferable color to meet the requirements.

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

.toggleoff .x-slider-horz {
    background-image: url('data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAgAD0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD313WNCzHCjqaqNPNJymI17ZGTS3J3XCJ2Ub/xzTalsaDzLj/nqP8AvkUb5/8Anr/46KKKV2Ab5x/y1/8AHRSia4U53I/sRikoouwLMUyzLkcEcMp6g1LVAHZNGw7nYfcGr9UhFO5G24R+zLt+hzTatyIroVYZBqo8M8f3FWUdsnBpNDQUUgW4/wCeGP8AgQpdk/8AzwP/AH0KVmAUUbJ/+eB/76FKIp24EYT3Yg/yoswG43zRoOzbz7Af5FX6hihEI45Y/eY9TU1UhH//2Q==');
    width: 56px !important;
    height: 31px !important;
    padding-left: 0px !important;
}

.toggleoff .x-slider-horz .x-slider-end {
    background-image: url('data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAgAD0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD313WNCzHCjqaqNPNJymI17ZGTS3J3XCJ2Ub/xzTalsaDzLj/nqP8AvkUb5/8Anr/46KKKV2Ab5x/y1/8AHRSia4U53I/sRikoouwLMUyzLkcEcMp6g1LVAHZNGw7nYfcGr9UhFO5G24R+zLt+hzTatyIroVYZBqo8M8f3FWUdsnBpNDQUUgW4/wCeGP8AgQpdk/8AzwP/AH0KVmAUUbJ/+eB/76FKIp24EYT3Yg/yoswG43zRoOzbz7Af5FX6hihEI45Y/eY9TU1UhH//2Q==');
    width: 56px !important;
    height: 31px !important;
}

.toggleoff .x-slider-horz .x-slider-inner {
    background-image: url('data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAgAD0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD313WNCzHCjqaqNPNJymI17ZGTS3J3XCJ2Ub/xzTalsaDzLj/nqP8AvkUb5/8Anr/46KKKV2Ab5x/y1/8AHRSia4U53I/sRikoouwLMUyzLkcEcMp6g1LVAHZNGw7nYfcGr9UhFO5G24R+zLt+hzTatyIroVYZBqo8M8f3FWUdsnBpNDQUUgW4/wCeGP8AgQpdk/8AzwP/AH0KVmAUUbJ/+eB/76FKIp24EYT3Yg/yoswG43zRoOzbz7Af5FX6hihEI45Y/eY9TU1UhH//2Q==');
    width: 56px !important;
    height: 31px !important;
}

.toggleoff .x-slider-horz .x-slider-thumb {
    width: 25px !important;
    height: 25px !important;
    border-radius: 25px !important;
    background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAAcAB8BAREA/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/APe5JFiTc30AHUn0qLZPJy0vlD+6gBIH1P8AhRi4i53+co6ggBse2OPwqdHV0V1OVIyDUEnzXsKnoEZx9eBn9T+dWaKr2/Etwg+6smR7ZAJH5kn8aWZG3JKnLJnj1HcU9JUkXKtnsR0IPvSSSrHweWP3VHJNJBGY0JbG9zubHTP+eKmqGS3hkbc8Slv72OfzpYoIod3lxqhPUgcmpa//2Q==');
    margin-left: 4px !important;
    background-color: white !important;
    margin-top: 3px !important;
    background-position: -15px -24px;
}

.toggleon .x-slider-horz {
    background-image: url('data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAhADoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3qaaK3heaZwkaAszE4AFcNqXxBcSlNNtkKA8SS9/wqb4hX7x29tYo2FlzI/uB0Fef14GZ5jUp1PZUtLbs+jynK6VWn7asr32R1X/CwNX/AOedt/3wf8ab/wAJ5rP/AE7/APfuuXoryf7RxX87PZ/szCf8+0dSPH2sL1W2P1Q/41YtfiFfrKPtNrBIncJlSB+tcdRTjmWKTvzkyyvCNW5Ee06Xqtrq9kLm1fI6Mp4Kn0NX68q8E372niCOAN+7uAY2HbOMg16rX1GBxX1mipvfZnyeYYT6rXdNPTdHDfEOweSG1vkXKx5jcjsCeK4Cvcp4Irq3eCZA8bjaynkEVwep/D6VZWfTJ0ZD0jmOCPxry8zy6pUqe1pK990etlOZ0qVP2NZ2tsziaK6ceAta/u24/wC2n/1qP+ED1r+7b/8AfyvJ/s/FfyM9j+0sJ/z8RzFFdP8A8IHrP/Tv/wB/Kntfh/qTygXEsEMfcglj+VNZdim7cjE8zwiV+dFLwVYvdeIYZVB2W4MjHsOMAV6vWdpOkWujWYt7VcZ5dz1c+prRr6jAYX6tR5Hvuz5LMcWsVXc0tNkFFFFdpwhRRRQAUUUUAFFFFAH/2Q==');
    width: 56px !important;
    height: 31px !important;
    padding-left: 0px !important;
}

.toggleon .x-slider-horz .x-slider-end {
    background-image: url('data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAhADoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3qaaK3heaZwkaAszE4AFcNqXxBcSlNNtkKA8SS9/wqb4hX7x29tYo2FlzI/uB0Fef14GZ5jUp1PZUtLbs+jynK6VWn7asr32R1X/CwNX/AOedt/3wf8ab/wAJ5rP/AE7/APfuuXoryf7RxX87PZ/szCf8+0dSPH2sL1W2P1Q/41YtfiFfrKPtNrBIncJlSB+tcdRTjmWKTvzkyyvCNW5Ee06Xqtrq9kLm1fI6Mp4Kn0NX68q8E372niCOAN+7uAY2HbOMg16rX1GBxX1mipvfZnyeYYT6rXdNPTdHDfEOweSG1vkXKx5jcjsCeK4Cvcp4Irq3eCZA8bjaynkEVwep/D6VZWfTJ0ZD0jmOCPxry8zy6pUqe1pK990etlOZ0qVP2NZ2tsziaK6ceAta/u24/wC2n/1qP+ED1r+7b/8AfyvJ/s/FfyM9j+0sJ/z8RzFFdP8A8IHrP/Tv/wB/Kntfh/qTygXEsEMfcglj+VNZdim7cjE8zwiV+dFLwVYvdeIYZVB2W4MjHsOMAV6vWdpOkWujWYt7VcZ5dz1c+prRr6jAYX6tR5Hvuz5LMcWsVXc0tNkFFFFdpwhRRRQAUUUUAFFFFAH/2Q==');
    width: 56px !important;
    height: 31px !important;
}

.toggleon .x-slider-horz .x-slider-inner {
    background-image: url('data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAhADoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3qaaK3heaZwkaAszE4AFcNqXxBcSlNNtkKA8SS9/wqb4hX7x29tYo2FlzI/uB0Fef14GZ5jUp1PZUtLbs+jynK6VWn7asr32R1X/CwNX/AOedt/3wf8ab/wAJ5rP/AE7/APfuuXoryf7RxX87PZ/szCf8+0dSPH2sL1W2P1Q/41YtfiFfrKPtNrBIncJlSB+tcdRTjmWKTvzkyyvCNW5Ee06Xqtrq9kLm1fI6Mp4Kn0NX68q8E372niCOAN+7uAY2HbOMg16rX1GBxX1mipvfZnyeYYT6rXdNPTdHDfEOweSG1vkXKx5jcjsCeK4Cvcp4Irq3eCZA8bjaynkEVwep/D6VZWfTJ0ZD0jmOCPxry8zy6pUqe1pK990etlOZ0qVP2NZ2tsziaK6ceAta/u24/wC2n/1qP+ED1r+7b/8AfyvJ/s/FfyM9j+0sJ/z8RzFFdP8A8IHrP/Tv/wB/Kntfh/qTygXEsEMfcglj+VNZdim7cjE8zwiV+dFLwVYvdeIYZVB2W4MjHsOMAV6vWdpOkWujWYt7VcZ5dz1c+prRr6jAYX6tR5Hvuz5LMcWsVXc0tNkFFFFdpwhRRRQAUUUUAFFFFAH/2Q==');
    width: 56px !important;
    height: 31px !important;
}

.toggleon .x-slider-horz .x-slider-thumb {
    width: 25px !important;
    height: 25px !important;
    border-radius: 25px !important;
    background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAAcAB8BAREA/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/APe5JFiTc30AHUn0qLZPJy0vlD+6gBIH1P8AhRi4i53+co6ggBse2OPwqdHV0V1OVIyDUEnzXsKnoEZx9eBn9T+dWaKr2/Etwg+6smR7ZAJH5kn8aWZG3JKnLJnj1HcU9JUkXKtnsR0IPvSSSrHweWP3VHJNJBGY0JbG9zubHTP+eKmqGS3hkbc8Slv72OfzpYoIod3lxqhPUgcmpa//2Q==');
    margin-left: -27px !important;
    background-color: white !important;
    margin-top: 3px !important;
    background-position: -15px -24px;
}

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:

Ext.create('Ext.form.Panel', {
    title: 'Toggle Buttons',
    renderTo: Ext.getBody(),
    bodyPadding: '45 0 45 45',
    items: [{
            xtype: 'togglebutton',
            fieldLabel: 'Toggle Default On',
            value: 1,
            labelWidth: 130,
            listeners: {
             changecomplete: function (slider, newValue, thumb, eOpts){
                Ext.Msg.alert('Info', 'You have selected ' + newValue);
             }
            }
        }, {
            xtype: 'togglebutton',
            fieldLabel: 'Toggle Default Off',
            value: 0,
            labelWidth: 130,
            listeners: {
             changecomplete: function (slider, newValue, thumb, eOpts){
                    // 'do the required action'
             }
            }
        }]

});

Summary

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.

References

I am an experienced full stack developer with expertise in Angular, Sencha, .Net, MS SQL Server, Azure, MEAN Stack and mobile app development. I love gaming, traveling and never miss a chance to unwind on a Friday evening with friends and beer!

Tagged with: ,
Posted in Sencha ExtJS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: