Bind RadioGroup to Model in ExtJS 5


Binding RadioGroup can be problematic because its value in the form of object: {name:value}. The problem is more pronounced if we want to bind radio group to model instance field and the field stores primitive values.

The solution is to use formulas to transform objects from radio groups to primitive values that can be stored in model fields and vice versa primitive values from fields to objects that can be consumed by radio groups.

Main Features

  • view model links config option loads one record from the server
  • the record servers as data source
  • formulas create gender view model property for binding to radio group
  • formulas implement the transformation logic between radio group and model instance (record)
  • record field gender is directly bound to the combo to show that the formulas logic works as expected

Use Cases

This approach is useful when a model field can contain only a couple of distinct values and we want the user to select one of them in a radio group.

Example Files (relative to example root)

The example has been initially generated with sencha generate app. The following list contains only relevant files:

If you want to see the example code, login or sign-up. Free membership is available.
Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)


  1. Benjamin Orozco says

    Hi Saki! I have couple of questions:

    1. What”s the difference between using “type” or “reference” in ViewModel’s Link?
    2. Can you show Person’s model?

    Thanks in advance and keep the good work!

    • Benjamin Orozco says

      Also, what if Person model’s data is fetched through an Ajax proxy? Will it retrieve it automatically?

    • says

      Person model is very simple:

      and yes, due to links config option the model is automatically pulled from the server.

  2. Matt Madhavan says

    Hi Saki,
    I have a user model with an array of roles (id, rolename). There is a store for all roles (id/rolename). I am able bind to the store (in a viewmodel) and display the roles (names) in a multi-select combobox.

    I want to bind the ‘selected; values of the combobox to the roles (based on the id) of the Person. And also when the items are selected/de-selected in the ComboBox I want them to be automatically bound to the UserModel’s roles.

    Any ideas please? This is a common scenario where the adminstrator assigns different available roles to individual users.

    I appreciate in advance!


    • says

      If I get it right, you “value” is an array of the currently selected roles. If so it is not too different from the above example where the “value” is an object. You just need different get and set methods.

We will be happy to hear back from you

Please Login to post a comment