extjs-下拉列表联动

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

wangyuanjun008

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

阅读量1.2k

点赞数

分类专栏： extjs 文章标签： extjs

extjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化，去动态加载其他下拉列表，如：省、市、地区。

当我们监听到省变化时，向service端发送省的编号，service端根据收到的”省”编号到数据库中查询该省所对应的市信息，

地区同理，抓住这一点，我们只需要监听 combobox 的 select 事件并在其中实现逻辑即可。

1.代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--ExtJs框架开始-->
    <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/Ext/ext-all.js"></script>
    <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
    <!--ExtJs框架结束-->
    <script type="text/javascript">
        Ext.onReady(function () {
            //初始化标签中的Ext:Qtip属性。
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';

            //----------------------下拉列表开始----------------------//
            //创建市数据源
            var combocitystore = new Ext.data.Store({
                //设定读取的地址
                proxy: new Ext.data.HttpProxy({ url: '/App_Ashx/Demo/City.ashx' }),
                //设定读取的格式    
                reader: new Ext.data.JsonReader({ root: 'data' },
                 [{ name: 'id' }, { name: 'name'}])
            });
            //创建区数据源
            var comboareastore = new Ext.data.Store({
                //设定读取的地址
                proxy: new Ext.data.HttpProxy({ url: '/App_Ashx/Demo/Area.ashx' }),
                reader: new Ext.data.JsonReader({ root: 'data' },
                 [{ name: 'id' }, { name: 'name'}])
            });
            //创建市Combobox
            var comboboxcity = new Ext.form.ComboBox({
                id: 'comboboxcity',
                fieldLabel: '市',
                width: 120,
                store: combocitystore,
                displayField: 'name',
                valueField: 'id',
                triggerAction: 'all',
                emptyText: '请选择...',
                allowBlank: false,
                blankText: '请选择市',
                editable: false,
                mode: 'local', //该属性和以下方法为了兼容ie8
                listeners: {
                    'render': function () {
                        combocitystore.load();
                    }
                }
            });

            //创建区Combobox
            var comboareacity = new Ext.form.ComboBox({
                fieldLabel: '区',
                width: 120,
                store: comboareastore,
                displayField: 'name',
                valueField: 'id',
                triggerAction: 'all',
                emptyText: '请选择...',
                allowBlank: false,
                blankText: '请选择区',
                editable: false
            });
            //联动的实现
            comboboxcity.on('select', function () {
                comboareastore.baseParams.id = comboboxcity.getValue();
                comboareacity.setValue('');
                comboareastore.load();
            })
            //----------------------下拉列表结束----------------------//
            //表单
            var form = new Ext.form.FormPanel({
                frame: true,
                title: '表单标题',
                style: 'margin:10px',
                items: [comboboxcity, comboareacity]
            });
            //窗体
            var win = new Ext.Window({
                title: '窗口',
                width: 476,
                height: 374,
                resizable: true,
                modal: true,
                closable: true,
                maximizable: true,
                minimizable: true,
                buttonAlign: 'center',
                items: form
            });
            win.show();
        });
    </script>
</head>
<body>
<!--

说明：
(1)var combocitystore = new Ext.data.Store():创建一个新的数据源。
(2)proxy: new Ext.data.HttpProxy({ url: ‘/App_Ashx/Demo/City.ashx’ })：数据代理为http代理，地址为/App_Ashx/Demo/City.ashx。
(3)reader: new Ext.data.JsonReader({ root: ‘data’ },[{ name: ‘id’ }, { name: ‘name’}]):读取json返回值根节点为data，对象列为id和name。
这里要结合client与service观察,我在service端的输出如下：{data:[{id:1,name:’北京’},{id:2,name:’上海’}]}
(4)comboboxcity.on(‘select’, function () {}：市选择变化时触发事件。
(5)comboareastore.baseParams.id = comboboxcity.getValue()：注意，前面的comboareastore是区的数据源，
当市变化时，我们给区的数据源加上个向service端发送的参数。
(6)comboareacity.setValue(”)：把区的下拉列表设置为空，由于非空验证，Ext会提示用户“请选择区”，这个地方也可以把加载出来的第一个区
显示在区的下拉列表中，具体请自行实现吧。
(7)comboareastore.load()：区的数据源重新加载。
–>

其中与service交互用到两个.net 一般处理程序文件，源码如下：

(1)/App_Ashx/Demo/City.ashx

using System.Web;

namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
{
    public class City : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.Write("{data:[{id:1,name:'北京'},{id:2,name:'上海'}]}");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

(2)/App_Ashx/Demo/Area.ashx

using System.Web;

namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
{
    public class Area : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            //接收Client端传来的参数，交根据条件返回
            if (context.Request.Form["id"].ToString() == "1")
            {
                context.Response.Write("{data:[{id:1,name:'东城区'},{id:2,name:'西城区'},{id:2,name:'海淀区'}]}");
            }
            else
            {
                context.Response.Write("{data:[{id:1,name:'杨浦区'},{id:2,name:'虹口区'},{id:2,name:'闸北区'}]}");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

2.效果如下：
这里写图片描述

wangyuanjun008

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
extjs-下拉列表联动

不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化，去动态加载其他下拉列表，如：省、市、地区。当我们监听到省变化时，向service端发送省的编号，service端根据收到的”省”编号到数据库中查询该省所对应的市信息，地区同理，抓住这一点，我们只需要监听 combobox 的 select 事件并在其中实现逻辑即可。1.代码如下：
复制链接

扫一扫