顯示表單字段取決於組合框值ExtJs

Question

我有一個值為'1,2,3,4,5 .... 13'的組合框

如果所選值為1，則必須在現有表單字段中顯示3個字段。 如果該值為2、3、4、5或6，那么我需要添加一個字段。

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

顯示/隱藏字段的代碼：

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();
    }
},

它的工作，但我還需要檢查值“ 3,4和5”。 我認為有適當的方法可以做到這一點。 “ 2、3、4和5”具有與“ parentId”相同的值。

請分享您的想法..

Answer 1

假設您希望處理常見的案件，則可以使用相同的邏輯綁定多個案件，如下所示：
如果case1和case2必須執行相同的功能，則可以按以下方式使用它：

case1:
case2:
   //your code

根據您提供的描述，您似乎必須對案例2、3、4、5、6執行相同的功能。 考慮到這一點，我對您的代碼進行了如下修改：

{
    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();
    }
},