Dynamic Sencha Touch Forms – Part 1 – Enabling/Disabling Fields based on form selections
This tutorial is going to form a small series about creating dynamic forms that react to previous user input so you can keep your forms tidy and simple without the bloat of extra fields and so you can populate fields dynamically based on other selections.
In this tutorial we will start with the simple case of only wanting to show/enable fields when users have selected a specific value from, for example, a dropdown list.
As with all our tutorials there is a Tutorial Package that contains all the files you need to try the examples and follow the tutorial step by step. If you click on the Step’s header you can view the demo for that step.
Our Fake Scenario
We like to keep things as near to a real-life situation as we can so these tips and tutorials aren’t horrendously abstract so we’re going to model a form that will…..
Step 1 – Create our Form
We’re going to create our form as an extension of the Ext.form.FormPanel class and then instatiate and show it in our onReady function. We are going to add one Ext.form.Select field and an Ext.form.Toggle field that will be enabled/disabled based on the Select field’s value.
Ext.ns('DynamicForms'); // register our namespace
DynamicForms.MyForm = Ext.extend(Ext.form.FormPanel, {
initComponent: function(){
Ext.apply(this, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false,
items: [{
xtype: 'selectfield',
options: [{
text: 'Test', value: 'Test'
}, {
text: 'Test2', value: 'Test2'
}, {
text: 'Test3', value: 'Test3'
}]
}, {
xtype: 'togglefield',
label: 'Toggle Test',
disabled: true
}]
});
DynamicForms.MyForm.superclass.initComponent.call(this);
}
});
Firstly, we’ve registered our DynamicForms namespace so that we have somewhere to put our MyForm class.
Within our Ext.apply call we’re adding our configuration. The first 6 options are there to size and position our panel so that we can see it and use it – nothing too fancy there.
Next we define our form’s items which contains a selectfield (Ext.form.Select) with 3 options and a togglefield (Ext.form.Toggle).
In the onReady function of our application we create a new instance of our MyForm class and call the show method on it.
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var myForm = new DynamicForms.MyForm(); //instatiate our new class
myForm.show(); // show the form
}
});
If you run this just now you should see a panel in the middle of your browser with the two form fields we created in it.
Step 2 – Make it Dynamic!
Now we can do the fun bit. We’re going to attach an event handler to the selectfield’s change event and enable/disable the toggle field based on the value that is selected.
First we create a function that will be executed when the selectfield’s value is changed. This event takes 2 parameters – a reference to the selectfield itself and the value that was selected. We will use the second parameter to determine if we want the togglefield to become active or not. The code listing below shows this function. In our little example we are going to enable the Toggle Field only when the user selects ‘Test2′.
onChange: function(selectField, value){
if(value === 'Test2'){ // enable the togglefield if 'Test2' was selected
this.items.get(1).enable();
} else { // otherwise we disable it
this.items.get(1).disable();
}
}
Because in our example the default state of the togglefield is disabled we must have the else block in there to reset the togglefield to disabled if we are selecting a value other than ‘Test2′.
onChange: function(selectField, value){
this.items.get(1).setDisabled((value !== 'Test2'));
}
We change the operator from ‘===’ to ‘!==’ so the logic is correct.
The last thing we have to do is attach this new function to the selectfield’s change event. We do this in the initComponent method right after we call the class’s superclass.
// get the selectfield then call the 'on' method to attach the handler
this.items.get(0).on({
change: this.onChange,
scope: this
});
We add the ‘scope’ option to make sure the onChange method runs in the scope of the FormPanel.
Now if we open the Step 2 HTML file in the Tutorial Package we can see it working. To start with the togglefield is disabled but if we select the Test2 value from the selectfield the field becomes enabled and its value changed. If we select Test3 then the togglefield is disabled again.
The Next Part…
I hope you’ve found this quick tutorial useful and please come back for the next part where I will show you how to dynamically load a select field’s data based on another select field’s value.
The second part of this tutorial can now be found here. We hope it is of use to you!
As always, please leave a comment and show us how you’ve put this tutorial to use!
23 Comments to "Dynamic Sencha Touch Forms – Part 1 – Enabling/Disabling Fields based on form selections"
edmund
February 15, 2011
Andy
February 15, 2011
edmund
February 16, 2011
edmund
February 16, 2011
edmund
February 16, 2011
edmund
February 16, 2011
Andy
February 16, 2011
mizan_bd
March 29, 2011
Stuart
March 29, 2011
robin
April 11, 2011
Stuart
May 6, 2011
Brandon
May 24, 2011
Stuart
May 26, 2011
Stuart
May 30, 2011
Mihail
June 4, 2011
Sencha Touch Related Links | Chris' Laboratory
November 7, 2011
Monta
February 10, 2012
Stuart
February 10, 2012
Monta
February 11, 2012
Stuart
February 11, 2012
Monta
February 11, 2012
Monta
February 13, 2012
Stuart
February 14, 2012