ExtJs RadioGroup根据选择的值决定某些表单是否显示

表单中，有“是否教师”的字段，如果该字段为“是”，则显示应聘的学科，如果“不是”，则隐藏应聘学科表单组件。

这里用radioGroup组件来实现“是否教师”字段，代码如下：

{ width : 200, xtype: "radiogroup", fieldLabel : "是否教师系列", layout: "column", allowBlank : false, border: false, name: "isTeacher", id: "isTeacher", items:[{ boxLabel: "是", name: "isTeacher", inputValue: "是" },{ boxLabel: "否", name: "isTeacher", inputValue: "否", checked: true }], listeners: { "change": function() { if (Ext.getCmp("isTeacher").getValue().inputValue == "是") { Ext.getCmp("fieldEmploy").setVisible(true); } else { Ext.getCmp("fieldEmploy").setVisible(false); } } } }

主要是添加change事件，监听radioGroup取值的变化，在每次变化时判断取值，根据取值决定是否显示目标字段。

需要注意的是：radioGroup中定义选项时需要配置inputValue，这是传递的参数，即选中该选项时，向外界传递的参数。

其中fieldEmploy字段的定义没有在这里写，这个可以根据自己的需求进行定义。最终执行的效果如下：

初始默认“是否教师”为“否”，所以不显示“应聘学科”字段：

选择“是”之后，显示如下：