EXT级联（静态数组的级联） -

dingherry

浏览: 66072 次
性别:
来自: 南京

最近访客更多访客>>

xian_jiang

YES问博

xlqazwsx2

tank924

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT级联（静态数组的级联）

EXT JSP HTML SUN C

网上找了很多例子，方式多种多样，这里贴出静态数组的级联例子吧。
原理和方法：
1.new 2个Array并初始化
2.在第一级菜单里添加 listeners设置传参
3.第二级菜单store中联动查询

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>EXT级联</title>

<link rel="stylesheet" type="text/css" href="<c:url value="/view/ext/resources/css/ext-all.css"/>"/>
<script type="text/javascript" src="<c:url value="/view/ext/adapter/ext/ext-base.js"/>"></script>
<script type="text/javascript" src="<c:url value="/view/ext/ext-all.js"/>"></script>
<script type="text/javascript" src="<c:url value="/view/ext/ext-lang-zh_CN.js"/>"></script>

 <script type="text/javascript">
 var provinces = [[1,'北京'],[2,'上海']];   
 var cities = new Array();   
 cities[1] = [[11,'海淀'],[22,'东城']];   
 cities[2] = [[33,'黄埔'],[44,'浦东'],[55,'静安']];  
 
 var comboProvinces = new Ext.form.ComboBox({   
	 store: new Ext.data.SimpleStore( {   
	 fields: ["provinceId", "provinceName"],   
	 data: provinces   
	 }),   
	 listeners:{   
		 select:function(combo, record,index){    
		 comboCities.clearValue();   
		 comboCities.store.loadData(cities[record.data.provinceId]);   
		 }   
	 },   
	 valueField :"provinceId",   
	 displayField: "provinceName",   
	 mode: 'local',   
	 forceSelection: true,   
	 blankText:'请选择省份',   
	 emptyText:'请选择省份',   
	 hiddenName:'provinceId',   
	 editable: false,   
	 triggerAction: 'all',   
	 allowBlank:true,   
	 fieldLabel: '请选择省份',    
	 name: 'provinceId',   
	 width: 380  
 });   
 var comboCities = new Ext.form.ComboBox({   
	 store: new Ext.data.SimpleStore( {   
	 fields: ["cityId",'cityName'],   
	 data:[]   
	 }),   
	 valueField :"cityId",   
	 displayField: "cityName",   
	 mode: 'local',   
	 forceSelection: true,   
	 blankText:'选择地区',   
	 emptyText:'选择地区',   
	 hiddenName:'cityId',    
	 editable: false,   
	 triggerAction: 'all',   
	 allowBlank:true,   
	 fieldLabel: '选择地区',   
	 name: 'cityId',   
	 width: 380  
 });  
 Ext.onReady(function() {
	    var newCarForm=new Ext.FormPanel({
	        frame: true,
	        title: 'Car Reviews',
	        bodyStyle: 'padding:5px',
	        renderTo:"combo",
	        width: 420,      
	        items: [
	        comboProvinces, comboCities
	        ]
	    });
	    
	});
</script>
</head>

<body>
<div align="center" id="combo"></div>
</body>
</html>

分享到：