Extjs 4 ComboBox下拉框联动

最新推荐文章于 2018-02-26 09:18:02 发布

tonyboat2090

最新推荐文章于 2018-02-26 09:18:02 发布

阅读量230

点赞数

分类专栏： extjs 文章标签： javascript ViewUI

extjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果： http://extjshelp.sinaapp.com/combo/

原理是，处理第一个combo的change事件，过滤第二个combo的store:

Ext.onReady(function(){
	Ext.create("Ext.form.ComboBox",{
		id:'schoolCombo',
		fieldLabel:'学校',
		labelAlign:'right',
		store:["红领小学","光辉中学"],
		listeners:{
			  	change:function(schoolCombo){
						var school = schoolCombo.getValue()
				       		var studentStore = Ext.getCmp("studentCombo").getStore()
						studentStore.clearFilter();
						studentStore.filter("school",school) 
				       }
			  },
		renderTo:'school'
	})	
	Ext.create("Ext.form.ComboBox",{
		id:'studentCombo',
		fieldLabel:'学生',
		labelAlign:'right',
		displayField:'student',
		valueField:'student',
		store:{
			type:'array',
			fields:["school","student"],
			data:[
				["红领小学",'张三'],
				["红领小学",'朱重八'],
				["光辉中学",'陈九四'],
				["红领小学",'李咬金'],
			],
		},
		renderTo:'student'
	})
})<html>

	<head>
	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
	<script type="text/javascript" src="../extjs/ext-all.js"></script>
	<script type="text/javascript" src="app.js"></script>
	</head>
	<body>
		<div id="school"></div>
		<div id="student"></div>
	</body>
</html>