As you develop your ExtJS application, you’ll inevitably need to use a good ol’ radio button. Whether you’re using radio buttons as part of a larger form, or just a one-off for a special purpose, ExtJS has some powerful ways to use them…if you know how.

Let’s say we have a simple form for adding cars to our imaginary application. First, let’s create a model to define our data:

Ext.define("Cars.model.Car"), {
    extend: "Ext.data.Model",
    fields: [
        {name: "make", type:"string"},
        {name: "model", type: "string"},
        {name: "color", type: "string"}
    ]
});

Okay, nothing to out of the ordinary here. We’ve defined a simple model for our “car” data, and for each car we’ll enter the make, model, and specify the color.

Now let’s make our form for entering this data:

Ext.define("Cars.view.cars.CarForm", {
    extend: "Ext.form.Panel",
    alias: "widget.carform",
    title: "Enter Car Details",
    items: [
        {
            xtype: "textfield",
            name: "make",
            fieldLabel: "Make of Car"
        },
        {
            xtype: "textfield",
            name: "model",
            fieldLabel: "Model of Car"
        },
        {
            xtype: "radiogroup",
            fieldLabel: "Color",
            id: "colorgroup",
            defaults: {xtype: "radio",name: "color"},
            items: [
                {
                    boxLabel: "Red",
                    inputValue: "red",
                },
                {
                    boxLabel: "Silver",
                    inputValue: "silver",
                },
                {
                    boxLabel: "Blue",
                    inputValue: "blue",
                }
            ]
        }
    ]
});

Pretty simple stuff here as well. One thing to point out, however, is that I’ve wrapped my “color” radio buttons in a “RadioGroup” container. There are lots of benefits to using RadioGroups in ExtJS. First of all, RadioGroup is a special container that helps layout your radio buttons. You can specify pretty granularly how you want to arrange radio buttons within the group–stacked, all horizontal, etc. Additionally, radio groups can provide special validation wrapping to radio buttons that don’t normally exist for the individual form fields, such as requiring that one radio button be selected from a group.

Selecting Radio Buttons

Enough about setting up our form. The real point of this post is to discuss the ways in which you can “select” a radio button within a form. So let’s say we’re wanting to edit one of the cars in our store. How are we going to make sure that the “color” we saved gets correctly checked in the form?

Way #1: The Wrong Way

A very easy way to accomplish this would be to give every single radio button an id. When loading the data record, you could simply match up the value to the radio button with the correct id, get the radio button, and then set its “checked” attribute to true.

This is a bad option, of course, because it’s unsustainable. Sure, if you only have two options that never change, it’s not a big deal. However, as your code grows over time, you’ll have to continue working around this “hack,” making sure that nothing breaks with each iteration of your code. So forget ids. What’s the best way to do this?

Way #2: The Best Way

The best way to set a radio button value is to use the form methods that ExtJS provides out of the box. For example, consider the loadRecord() method. With this method, you can take a data record (e.g., a collection of data tied to the model we outlined above), pass it to the form itself, and ExtJS will take care of entering the correct values for each field, including radio buttons.

For example, let’s say I’m loading a record from my store for a Ford Escort in my loadCar() method. In Chrome’s Developer Tools, here’s what my data record looks like:

function loadCar(record) {
    ...
}
record: Ext.Class.Class.newClass
data: Object
    make: "Ford"
    model: "Escort​"
    color: "red"
....

As you can see, the data inside the record maps directly to the model I defined. Additionally, since the keys of my data model are precisely the same as the names of my “car” form fields, when I pass this data record to my form’s loadRecord(), it will take the values from my data record and use them to populate the fields whose name attributes match my data record’s keys.

function loadCar(record) {
    Ext.getCmp("carform").loadRecord(record);
}

Way #3: Special Situations

There may be times when you have a radio button that is not necessarily part of a form and/or is not necessarily tied to a data record. Even in this scenario, there is still a good, out-of-the-box way to select the correct radio button without resorting to id-matching.

In this situation, using the RadioGroup will be a life-saver. So let’s consider our car color example again. However, this time, let’s imagine we don’t have a data record, but are rather setting the correct radio button selection based on some other action. We can select the correct radio button by using the RadioGroup’s setValue() method:

// get RadioGroup
var radios = Ext.getCmp("colorgroup");
// now set the value of the radio button(s) that match the key/value pair
radios.setValue({color:"red"});

As seen, the RadioGroup’s setValue() method expects a key/value that corresponds to the names of the radio buttons which need to be evaluated. In essence, this method will find all the child radio buttons of this RadioGroup whose name attributes are “color”, and will set their “checked” attribute to true if their “inputValue” attribute is equal to the passed value (“red”, in this example).

Conclusion

Obviously, there is a LOT more that could be said about radio buttons within ExtJS, especially in relation to how you can leverage the RadioGroup to do some cool and powerful stuff. However, I hope this was a good introduction to a few of the ways that you can manage the task of properly setting radio button values within your applications.