效果： 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>
- 大小: 4.5 KB
- 大小: 3.8 KB
分享到：
相关推荐
实现级联下拉框的核心在于数据的联动和更新。这通常通过监听第一个下拉框的选中事件来完成，当用户在父级ComboBox中选择一个项时，会触发一个事件，这个事件可以用来更新子级ComboBox的数据源。在Ext JS中，可以通过...
当我们将SSH2与ExtJS ComboBox结合使用时，可以创建动态联动的下拉框，实现数据的级联选择，提高用户交互体验。 在SSH2框架中，Struts2负责处理用户的请求和视图展示，Spring则管理应用的业务逻辑和依赖注入，...
ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——...
在ExtJS6中，下拉列表（ComboBox）是一种常见的组件，用于提供用户可以选择的预定义选项。这个框架提供了丰富的功能和定制性，使得下拉列表不仅能够简单地显示一组静态选项，还能与数据源进行联动，展示动态加载的...
在本项目中，"漂亮的Extjs+struts2实现联动下拉"是一个集成这两个技术的实例，实现了在Web应用中动态更新下拉框选项的功能。 联动下拉框是一种常见的交互设计，常见于需要根据前一个选择项动态加载后一个选择项的...
在EXTJS框架中，`Ext.ux.form.LovCombo`是一种自定义组件，它扩展了基本的`Ext.form.field.ComboBox`，提供了更丰富的功能，尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”（即“Look Up Value”...
MultiComboBox是ExtJS中的一个自定义组件，它扩展了基础的ComboBox类，增加了多选的功能。默认情况下，ComboBox只允许用户选择一个值，而MultiComboBox则允许用户选择多个值，这些值通常以复选框的形式展示。 要...
"EXT中COMBOBOX联动"指的是在EXTJS应用中，两个或多个COMBOBOX之间实现数据交互和联动效果，即当一个COMBOBOX的选择项改变时，会触发其他COMBOBOX的更新，以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...
首先，让我们深入理解ExtJs中的联动下拉框（ComboBox）组件。ComboBox是ExtJs中的一种常见控件，它可以显示一个下拉列表供用户选择。在这个项目中，三个ComboBox分别代表省、市、县，它们之间通过事件监听和数据绑定...
在ExtJS中，"二级联动"通常指的是两个或多个下拉框（ComboBox）之间的联动效果，即在一个下拉框选择一个选项后，另一个下拉框会根据前者的选值动态更新其选项。这在数据筛选、地区选择、分类细化等场景中非常常见。 ...
3. **ExtJS前端实现**：在ExtJS中，我们可以创建两个`ComboBox`（下拉框）组件，分别代表省份和城市。省份下拉框的配置应包括加载所有省份的数据，而城市下拉框的配置则需要监听省份下拉框的`select`事件，当省份...
在ExtJS中，这通常通过组合框（ComboBox）组件和数据存储（Store）配合实现。每个级别的下拉框都有自己的Store，当上一级选择改变时，可以通过监听事件并更新Store来刷新下拉列表内容。 开发这样的控件需要掌握以下...
EXTJS 4中的"lovcombo"（即“联动下拉框”或“选择器组合框”）是用于创建这种高级交互控件的一种方式。lovcombo结合了下拉框和复选框的特性，使得用户可以在一个下拉菜单中选择多个选项，每个选项前都有一个复选框...
在实现三级联动时，可以使用ExtJS的ComboBox组件，通过store与远程数据源（servlet）连接，实现数据的动态加载。ExtJS的模型层（Model）、存储层（Store）和视图层（View）设计使数据管理更为规范，同时其丰富的组件...
在本例中，我们将聚焦于"comboBoxDemo"，这是一个基于ExtJS 4.2的下拉框组件的扩展，具有下拉树和多选功能。 ComboBox是ExtJS中的一个基础控件，通常用于创建下拉列表。它允许用户输入文本或从预定义的选项列表中...
4. **扩展下拉框**：EXTJS允许我们自定义组件，可以通过继承`Ext.form.field.ComboBox`并重写相关方法，比如`onRender`和`onExpand`，来实现下拉框展开时显示树形结构。 5. **事件监听**：添加必要的事件监听器，如...