显示表单字段取决于组合框值 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'
},

代码到 show/hide 字段：

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

显示表单字段取决于组合框值 ExtJs

Display the form fields depends on combobox value ExtJs

extjs

sencha-cmd