For some reason, radio buttons always seem to be tricky no matter what technology I’m using. What I plan to show here is how to work with Radio Buttons in a Sencha Touch (2.2.1) form, how to default the value you want, and how to read the value a user sets. Just to bring this into perspective, I’m currently building our mobile web application for our upcoming Silicon Valley Code Camp October 5th and 6th. We want the attendees to able to select a session, then state whether they plan on attending or are just interested. The problem is we need to show what their previous intention was when the form comes up so we need to bring up the radio button group, then set the current value. Here is what we will build.
I think the best way to explain is to show the code, then below talk about what happens. So, here is the code:
Lines 7-33 basically just create the form with the radio button group. Just by way of simple explanation, all the “name” attributes must be the same. This is what makes radio buttons work like radio buttons and not check boxes. The value is of course what value gets posted back to the server associated with the name. For example, this means that if we were to submit this form to the server, the server would see something like:
Lines 35 to 49 simply create a toolbar with our button. The handler grabs a reference to the form panel itself by doing up-up. This is kind of lazy but it works. The first up takes you from the button to the toolbar itself, and the second up takes you to the form panel. Since toolbars buttons are almost always like this, it is a fine solution.
The key to setting the the radio button is to pass a config object with the new value of the radio button assigned to the name (see line 43).
That’s basically it. Hope this helps!
Just this week I completed a 4.5 hour video on Sencha Touch Fundamentals. More details on working with Sencha Touch forms can be found in the Visual Components Module “Introduction to Sencha Touch Forms and Fields”.