日期:2014-05-16  浏览次数:20341 次

Extjs 4 ComboBox下拉框联动

效果:?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>