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, More >