Display the form fields depends on combobox value ExtJs

Question

I have a combobox with values '1,2,3,4,5....13'

If the selected value is 1, then I have to display 3 fields to the existing form fields. If the value is 2,3,4,5 or 6, then I need to add a single field.

{
    xtype:'combobox',
    name:'user_role',
    id : 'user_role',
    fieldLabel: 'Role',
    displayField: 'role_name',
    valueField: 'role_id',
    store: roleStore,
    allowBlank: false,                  
    queryMode : 'local'
},

code to show/hide the fields :

created hideden fields like :

{
    xtype: 'textfield',
    fieldLabel: 'License Number',
    name: 'doctor_licenseNumber', 
    id : 'doctor_licenseNumber',
    //allowBlank: false,
    enablekeyEvents: true,  
    hidden: true,               
},  

Ext.getCmp('user_role').on('change', this.onChange, this);

onChange: function(field, newValue) {
    switch(newValue) {
        case '1':
            Ext.getCmp('doctor_type').show();
            Ext.getCmp('doctor_licenseNumber').show();              
            Ext.getCmp('doctor_departmentId').show(); 
            Ext.getCmp('marketing_allocationStatus').hide(); 
            break;
        case '2':
            Ext.getCmp('marketing_allocationStatus').show();
            Ext.getCmp('doctor_type').hide();
            Ext.getCmp('doctor_licenseNumber').hide();              
            Ext.getCmp('doctor_departmentId').hide(); 
            break;
        default :
            Ext.getCmp('doctor_type').hide();
            Ext.getCmp('doctor_licenseNumber').hide();              
            Ext.getCmp('doctor_departmentId').hide(); 
            Ext.getCmp('marketing_allocationStatus').hide();
    }
},

Its working but I need to check for the values '3,4 and 5' also. I think there is a proper way to do this. '2,3,4 and 5' has a common value for'parentId'.

Please share your ideas..

Answer 1

Assuming you are expecting common cases handling, you can bind multiple cases with same logic as follows:
If case1 and case2 have to perform same functionality then you can use it as follows:

case1:
case2:
   //your code

As per the description you have provided, it looks like you have to perform same functionality for cases 2,3,4,5,6. Considering it, I have modified your code as follows:

{
    xtype: 'textfield',
    fieldLabel: 'License Number',
    name: 'doctor_licenseNumber', 
    id : 'doctor_licenseNumber',
    //allowBlank: false,
    enablekeyEvents: true,  
    hidden: true,               
},  

Ext.getCmp('user_role').on('change', this.onChange, this);

onChange: function(field, newValue) {
    switch(newValue) {
        case '1':
            Ext.getCmp('doctor_type').show();
            Ext.getCmp('doctor_licenseNumber').show();              
            Ext.getCmp('doctor_departmentId').show(); 
            Ext.getCmp('marketing_allocationStatus').hide(); 
            break;
        case '2':
        case '3':
        case '4':
        case '5':
        case '6':
            Ext.getCmp('marketing_allocationStatus').show();
            Ext.getCmp('doctor_type').hide();
            Ext.getCmp('doctor_licenseNumber').hide();              
            Ext.getCmp('doctor_departmentId').hide(); 
            break;
        default :
            Ext.getCmp('doctor_type').hide();
            Ext.getCmp('doctor_licenseNumber').hide();              
            Ext.getCmp('doctor_departmentId').hide(); 
            Ext.getCmp('marketing_allocationStatus').hide();
    }
},