[英]Display the form fields depends on combobox value ExtJs
I have a combobox with values '1,2,3,4,5....13' 我有一个值为'1,2,3,4,5 .... 13'的组合框
If the selected value is 1, then I have to display 3 fields to the existing form fields. 如果所选值为1,则必须在现有表单字段中显示3个字段。 If the value is 2,3,4,5 or 6, then I need to add a single field.
如果该值为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'
},
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. 它的工作,但我还需要检查值“ 3,4和5”。 I think there is a proper way to do this.
我认为有适当的方法可以做到这一点。 '2,3,4 and 5' has a common value for'parentId'.
“ 2、3、4和5”具有与“ parentId”相同的值。
Please share your ideas.. 请分享您的想法..
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必须执行相同的功能,则可以按以下方式使用它:
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. 根据您提供的描述,您似乎必须对案例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();
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.