<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo_1.aspx.cs" Inherits="ComboBoxTree.Demo.Demo_1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Ext3.0/Ext/adapter/ext/ext-base.js"></script>
<script src="../Ext3.0/Ext/ext-all.js"></script>
<script src="../Ext3.0/Ext/src/locale/ext-lang-zh_CN.js"></script>
<link href="../Ext3.0/Ext/resources/css/ext-all.css" rel="stylesheet" />
<style type="text/css">
.body
{
color: red;
}
</style>
<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: 200
});
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: 200
});
Ext.onReady(function () {
var newCarForm = new Ext.FormPanel({
frame: true,
title: 'Car Reviews',
bodyStyle: 'padding:5px',
renderTo: "combo",
width: 500,
items: [
comboProvinces, comboCities
]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="panel">
</div>
<div align="center" id="combo"></div>
</form>
</body>
</html>
View Code
