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.效果截图：