Ext省市县三级联动实现

最新推荐文章于 2022-11-23 16:43:52 发布

原创最新推荐文章于 2022-11-23 16:43:52 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ExtJS #省市区联动

这篇博客主要介绍了如何使用ExtJS框架来实现省市县三级联动的功能。通过创建Ext.data.JsonStore从服务器获取数据，并结合combo组件，实现选择省份后自动加载城市，再选择城市后加载区县的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是省市县的联动，即只有选择了省才能选择市，在选择县的

layout : 'column',
       xtype : 'container',
       style : '3 3 3 3',
       items : [{
        border : false,
        //columnWidth : .22,
        layout : 'form',
        items : [{
         fieldLabel : '请选择省份',
         anchor : '98%',
         hiddenName : 'tmember.addressProvince',
         xtype : 'combo',
         allowBlank : false,
         width : 90,
         emptyText : '请选择省份',
         mode : 'local',
         displayField : 'provinceName',
         valueField : 'id',
         id : 'provincex',
         editable : false,
         triggerAction : 'all',
         lazyInit : false,
         store : new Ext.data.JsonStore({
          autoLoad : true,
          fields : ['id', 'provinceName'],
          remoteSort : true,
          proxy : new Ext.data.HttpProxy({
           url : __ctxPath
             + '/system$/downProvince.do'
          })
         }),
         listeners : {
          'select' : this.getCity
         }
        }]
       }, {
        border : false,
        // columnWidth : .22,
        layout : 'form',
        items : [{
         anchor : '98%',
         width : 90,
         fieldLabel : '请选择城市',
         hiddenName : 'tmember.addressCity',
         xtype : 'combo',
         allowBlank : false,
         emptyText : '请选择城市',
         mode : 'local',
         displayField : 'cityName',
         valueField : 'id',
         id : "cityx",
         editable : false,
         triggerAction : 'all',
         lazyInit : false,
         store : new Ext.data.JsonStore({
          autoLoad : false,
          fields : ['id', 'cityName'],
          remoteSort : true,
          proxy : new Ext.data.HttpProxy({
             url : __ctxPath
               + '/system$/downCity.do'
            })
         }),
         listeners : {
          'select' : this.getCounty
         }
        }]
       }, {
        border : false,
        // columnWidth : .22,
        layout : 'form',
        items : [{
         anchor : '98%',
         width : 90,
         fieldLabel : '请选择地区',
         hiddenName : 'tmember.addressCounty',
         xtype : 'combo',
         emptyText : '请选择地区',
         mode : 'local',
         displayField : 'countyName',
         valueField : 'id',
         id : "countyx",
         allowBlank : false,
         editable : false,
         triggerAction : 'all',
         lazyInit : false,
         store : new Ext.data.JsonStore({
          autoLoad : false,
          fields : ['id', 'countyName'],
          remoteSort : true,
          proxy : new Ext.data.HttpProxy({
             url : __ctxPath
               + '/system$/downCounty.do?'
            })
         })
        }]
       }]