ExtJS 省、市、县级联示例
1.程序代码清单:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
var dataProvince = [
['河北', '河北'],
['内蒙古', '内蒙古']
];
var dataCityHebei = [
['唐山', '唐山'],
['秦皇岛', '秦皇岛'],
['承德', '承德'],
['张家口', '张家口']
];
var dataCityNeimenggu = [
['呼和浩特', '呼和浩特'],
['包头', '包头']
];
var dataCountyTangshan = [
['路南区', '路南区'],
['路北区', '路北区'],
['古治区', '古治区'],
['丰润区', '丰润区'],
['丰南区', '丰南区'],
['玉田', '玉田'],
['遵化', '遵化'],
['迁西', '迁西'],
['迁安', '迁安'],
['滦县', '滦县'],
['乐亭', '乐亭'],
['唐海', '唐海']
];
var dataCountUnknow = [
['不知道', '不知道']
];
var storeProvince = new Ext.data.SimpleStore({
fields:['value', 'text'],
data:dataProvince
});
var storeCity = new Ext.data.SimpleStore({
fields:['value', 'text'],
data:[]
});
var storeCounty = new Ext.data.SimpleStore({
fields:['value', 'text'],
data:[]
});
var comboProvince = new Ext.form.ComboBox({
store:storeProvince,
emptyText:'请选择省份',
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
fieldLabel:'请选择省份'
});
var comboCity = new Ext.form.ComboBox({
store:storeCity,
emptyText:'请选择城市',
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
fieldLabel:'请选择城市'
});
var comboCounty = new Ext.form.ComboBox({
store:storeCounty,
emptyText:'请选择县级',
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
fieldLabel:'请选择县级'
});
var entity = function(province, city, county) {
this.province = province;
this.city = city;
this.county = county;
}
var en = new entity();
comboProvince.on('select', function(comboBox){
var province = comboBox.getValue();
en.province = province;
if (province == '河北') {
storeCity.loadData(dataCityHebei);
comboCity.clearValue();
comboCounty.clearValue();
} else if (province == '内蒙古') {
storeCity.loadData(dataCityNeimenggu);
comboCity.clearValue();
comboCounty.clearValue();
}
});
comboCity.on('select', function(comboBox) {
var city = comboBox.getValue();
en.city = city;
if (city == '唐山') {
storeCounty.loadData(dataCountyTangshan);
comboCounty.clearValue();
}else {
storeCounty.loadData(dataCountUnknow);
comboCounty.clearValue();
}
});
comboCounty.on('select', function(comboBox) {
var county = comboBox.getValue();
en.county = county;
Ext.Msg.alert('提示', en.province + '省' + en.city + '市' + en.county + '县');
});
Ext.onReady(function(){
var newCarForm=new Ext.FormPanel({
frame: true,
title: 'comboBox_Cascade',
bodyStyle: 'padding:5px',
renderTo:"combo",
width: 500,
items: [
comboProvince, comboCity,comboCounty
]
});
});
</script>
</head>
<body>
<div id="combo"></div>
</body>
</html>
2.效果截图:
分享到:
相关推荐
ExtJS ComboBox级联是一种在Web应用中常见的交互方式,它允许用户从下拉列表中选择一个值,并且这个选择会影响到另一个ComboBox的选择项,通常用于表示层级关系的数据,比如省份-城市-区县。这种功能在数据筛选、...
以下是一个简单的ExtJS级联菜单代码示例: ```javascript Ext.application({ name: 'MyApp', launch: function () { var mainMenu = new Ext.menu.Menu({ items: [{ text: '主菜单', menu: { items: [{ ...
在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...
在示例中,它指向了EXTJS资源目录下的一个默认的空白图像。 总的来说,这段代码展示了如何在EXTJS中创建一个具有拖放、动画效果、可折叠和多级节点的树形结构,并且实现了节点选中状态的级联更新。这种树形结构常...
`tree.docx`文件可能包含了关于如何使用这个复选框树的文档,包括示例代码、配置项解释和常见问题解答。阅读这份文档可以帮助开发者更好地理解和应用这个功能。 总的来说,带复选框的树在ExtJS 3.x中是一个强大的...
本部分提供了多个实用示例,帮助开发者更好地理解和掌握Extjs的各种功能。 - **Windows的创建**:演示如何创建弹出窗口,并对其进行自定义。 - **HBOX和VBOX的使用**:介绍如何使用水平和垂直盒布局来组织组件。 - ...
- **Combobox 三级联动**:实现级联选择框的功能。 #### 5. 员工管理系统 - **准备工作**:规划项目结构和所需技术栈。 - **框架的搭建**:配置 Extjs 和后端服务。 - **菜单的实现**:创建导航菜单。 - **实现...
JSP Ext spring级联分页程序,JSP分页程序示例,结合漂亮的extjs框架实现。由于空间问题web-inf/lib里的jar文件未引入,本项目是在struts2 hibernate spring构架下的,所以需要引入这些jar包。
在这个"extjs4带checked的treegrid.rar"压缩包中,主要包含了一个实现了复选框功能的TreeGrid示例,名为"checkTreeGrid"。TreeGrid是ExtJS 4中的一个组件,它结合了树形结构和表格的功能,允许用户以表格的形式查看...
- **MultiCheckFunc**:实现级联多选效果。 ##### 3. 过滤器 过滤器用于筛选树中的节点,以满足特定的需求: - **ValueSingleEquals**:单个值相等匹配。例如,匹配所有`nodeFlag`属性为`org`的节点。 - **...
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例。前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架...