ExtJs根据combo的选择值决定表单项的隐藏或者显示

最新推荐文章于 2021-08-20 09:31:23 发布

gangwazi0525

最新推荐文章于 2021-08-20 09:31:23 发布

阅读量6.3k

点赞数 1

分类专栏： ExtJs 文章标签： extjs autoload function

本文链接：https://blog.youkuaiyun.com/gangwazi0525/article/details/7314837

版权

ExtJs 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用ExtJS实现表单字段之间的联动显示。具体案例为：当选择资格考试是否通过为是时，资格考试说明字段可见；否则，该字段隐藏。文章提供了详细的ExtJS配置代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

“资格考试是否通过”是一个combo组件，”资格考试说明“是一个textfield，最初是隐藏的，如果combo的选择值为“是”，则显示该表单项，否则不显示。注意combo自检中的store数据源为passExam，需要定义。本例中定义为：

// 资格考试是否通过
var passExam = [
	["是", "是"],["无", "无"]
];

form表单中的定义如下：

{
	width : 200,
	xtype: "combo",
	fieldLabel : "资格考试是否通过",
	name : "passExam",
	id: "passExam",
	emptyText: "请选择资格考试是否通过",
	mode: 'local',
	autoLoad: true,
	triggerAction: 'all',
	valueField: 'id',// 实际值
	displayField: 'name',// 显示值
	store: passExam,// 数据源
	listeners: {
		// 根据选择的值来决定表项是否显示
		"select": function() {
			if (Ext.getCmp("passExam").getValue() == "是") {
				Ext.getCmp("examNote").setVisible(true);
			} else {
				Ext.getCmp("examNote").setVisible(false);
			}
		}
	}
}, {
	xtype: "textfield",
	width : 200,
	fieldLabel : "资格考试说明",
	name : "examNote",
	id: "examNote",
	hidden: true
}