ExtJS 省、市、县 级联 示例

原创 2012年03月26日 17:14:23

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



相关文章推荐

Ext ComboBox级联菜单方法

Js代码 var fatherType = new Ext.form.ComboBox({                     name:'fatherType',                ...

一个简单实现Ext树的级联选中方法

 正在用ext ,可是树不能级联选中,自己的需求是选中子节点,则父节点都要选中,父节点取消选中则子节点全部取消选中,查了一下,已有高人扩展了Ext.tree.TreeNodeUI ,想着拿来用,可是自...
  • vkqiang
  • vkqiang
  • 2009年03月02日 17:12
  • 2715

Extjs中利用combobox实现全国省市级联

{                                         xtype : "combobox",                                     ...

用Ext 2.0 combobox 做的省份和城市联动选择框

      因项目需要,做了这个,发上来给大家参考一下,呵呵。     刚开始的思路是通过定义好的数组通过combobox的store的loadData方式加载数据,后来发现还不如直接定义好数组格式就...

ExtJs 省市级联选择代码

extjs 省市级联代码,掌握了,其实省市县等多级联动是一样的 { xtype: "combo", id: 'prov', ...

ext 级联菜单

 var modelStore =  new Ext.data.JsonStore({   /servlet/common?action=getModel">url:/servlet/common?a...
  • sanshou
  • sanshou
  • 2011年06月07日 17:01
  • 853

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

extjs 省市县 读取

Ext.onReady(function() { var sexValue=''; var schoolstatusValue=''; var curOpr=''; var provinceC...

ExtJS(三)--Ajax实现省份城市联动

今天学习了Ajax技术,刚刚做了一个省份-城市联动的Ajax应用示例。可能很多人都已经写过了,也是一个比较简单的例子,在这里分享出来大家共同学习交流一下。希望能给到那些像我一样的菜鸟程序员参考一点帮助...

中国省份城市级联选择--asp.net

      上次写了使用JavaScript实现中国省份级联选择,但是有朋友不愿意写JavaScript,所以今天写了一个使用。net来实现的例子,当然省份和城市还是使用我的 生活百科 里面的中国省份...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJS 省、市、县 级联 示例
举报原因:
原因补充:

(最多只允许输入30个字)