专栏首页GIS讲堂Extjs中ComboBoxTree的实现

Extjs中ComboBoxTree的实现

最近涉及到的一个项目中,需要实现ComboBoxTree的效果,首先,看看效果吧……

在Extjs中是没有这种效果的,所以得自己写,在网络上看了看别人的资料,自己再总结了一下,修改了一下,代码如下:

Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {
    constructor: function (cfg) {
        cfg = cfg || {};
        Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({
            maxHeight: 300,
            editable: false,
            mode: 'local',
            triggerAction: 'all',
            rootVisible: false,
            selectMode: 'all'
        }, cfg));
    },
    store: new Ext.data.SimpleStore({
        fields: [],
        data: [[]]
    }),
    // 重写onViewClick,使展开树结点是不关闭下拉框   
    onViewClick: function (doFocus) {
        var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
        if (r) {
            this.onSelect(r, index);
        }
        if (doFocus !== false) {
            this.el.focus();
        }
    },
    tree: null,
    // 隐藏值   
    hiddenValue: null,
    getHiddenValue: function () {
        return this.hiddenValue;
    },
    getValue: function () {   //增加适用性,与原来combo组件一样
        return this.hiddenValue;
    },
    setHiddenValue: function (code, dispText) {
        this.setValue(code);
        Ext.form.ComboBox.superclass.setValue.call(this, dispText);
        this.hiddenValue = code;
    },
    initComponent: function () {
        var _this = this;
        var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId
        this.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>"
        this.tree = new Ext.tree.TreePanel({
            border: false,
            enableDD: false,
            enableDrag: false,
            rootVisible: _this.rootVisible || false,
            autoScroll: true,
            trackMouseOver: true,
            height: _this.maxHeight,
            lines: true,
            singleExpand: true,
            root: new Ext.tree.AsyncTreeNode({
                id: _this.rootId,
                text: _this.rootText,
                iconCls: 'ico-root',
                expanded: true,
                leaf: false,
                border: false,
                draggable: false,
                singleClickExpand: false,
                hide: true
            }),
            loader: new Ext.tree.TreeLoader({
                nodeParameter: 'ID',
                requestMethod: 'GET',
                dataUrl: _this.url
            })
        });
        this.tree.on('click', function (node) {
            if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {
                if (_this.fireEvent('beforeselect', _this, node)) {
                    _this.fireEvent('select', _this, node);
                }
            }
        });
        this.on('select', function (obj, node) {
            var dispText = node.text;
            var code = node.id;
            obj.setHiddenValue(code, dispText);
            obj.collapse();
        });
        this.on('expand', function () {
            this.tree.render(tplRandomId);
        });
        Ext.ux.TreeCombo.superclass.initComponent.call(this);
    }
})
Ext.reg("treecombo", Ext.ux.TreeCombo);  

之后呢,在主页中添加Extjs类库

<link href="../ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../ext/ext-all.js" type="text/javascript"></script>
<script src="../ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<script src="../ext/ComboBoxTree.js" type="text/javascript"></script>
<script src="login.js" type="text/javascript"></script>

其中,login.js的代码如下:

/* File Created: 五月 27, 2013 */
Ext.onReady(function () {
    var _window = new Ext.Window({
        title: "查询条件",
        renderTo: Ext.getBody(),
        frame: true,
        plain: true,
        buttonAlign: "center",
        closeAction: "hide",
        maximizable: true,
        closable: true,
        bodyStyle: "padding:20px",
        width: 350,
        height: 300,
        layout: "form",
        lableWidth: 110,
        defaults: { xtype: "textfield", width: 180 },
        items: [
            {
                fieldLabel: "案件编号",
                anchor: "100%"
            },
			{
			    xtype: "datefield",
			    fieldLabel: "案发时间",
			    anchor: "100%"
			},
            {
                fieldLabel: "举报人",
                anchor: "100%"
            },
            {
                fieldLabel: "被举报单位或个人",
                anchor: "100%"
            },
            {
                xtype: "treecombo",
                fieldLabel: "案件发生地",
                anchor: "100%",
                url: "http://localhost:1502/treeData.ashx"/// <reference path="../treeData.ashx" />                
            },
            {
                xtype: "treecombo",
                fieldLabel: "案件类型",
                anchor: "100%",
                url: "http://localhost:1502/window/ajwflx.ashx"
            },
            {
                 xtype: "treecombo",
                fieldLabel: "案件性质",
                anchor: "100%",
                url: "http://localhost:1502/window/ajwfxz.ashx"
            }
        ],
        buttons: [{ text: "确定" }, { text: "取消", handler: function () { _window.hide(); } }]
    })
    _window.show();
}) 

treedata.ashxd的内容为:

string strTreeNode = "[" +
                                    "{'id':150100,'leaf':false,expanded:false,'text':'呼和浩特市国土资源局','children':[" +
                                        "{'id':150101,'leaf':true,'children':null,'text':'市辖区国土资源局'}," +
                                        "{'id':150102,'leaf':true,'children':null,'text':'新城区国土资源局'}," +
                                        "{'id':150103,'leaf':true,'children':null,'text':'回民区国土资源局'}," +
                                        "{'id':150104,'leaf':true,'children':null,'text':'玉泉区国土资源局'}," +
                                        "{'id':150105,'leaf':true,'children':null,'text':'赛罕区国土资源局'}," +
                                        "{'id':150121,'leaf':true,'children':null,'text':'土默特左旗国土资源局'}," +
                                        "{'id':150122,'leaf':true,'children':null,'text':'托克托县国土资源局'}," +
                                        "{'id':150123,'leaf':true,'children':null,'text':'和林格尔县国土资源局'}," +
                                        "{'id':150124,'leaf':true,'children':null,'text':'清水河县国土资源局'}," +
                                        "{'id':150125,'leaf':true,'children':null,'text':'武川县国土资源局'}" +
                                    "]}," +
                                    "{'id':150200,'leaf':false,expanded:false,'text':'包头市国土资源局','children':[" +
                                        "{'id':150201,'leaf':true,'children':null,'text':'市辖区国土资源局'}," +
                                        "{'id':150202,'leaf':true,'children':null,'text':'东河区国土资源局'}," +
                                        "{'id':150203,'leaf':true,'children':null,'text':'昆都仑区国土资源局'}," +
                                        "{'id':150204,'leaf':true,'children':null,'text':'青山区国土资源局'}," +
                                        "{'id':150205,'leaf':true,'children':null,'text':'石拐区国土资源局'}," +
                                        "{'id':150206,'leaf':true,'children':null,'text':'白云矿区国土资源局'}," +
                                        "{'id':150207,'leaf':true,'children':null,'text':'九原区国土资源局'}," +
                                        "{'id':150221,'leaf':true,'children':null,'text':'土默特右旗国土资源局'}," +
                                        "{'id':150222,'leaf':true,'children':null,'text':'固阳县国土资源局'}," +
                                        "{'id':150223,'leaf':true,'children':null,'text':'达尔罕茂明安联合旗国土资源局'}" +
                                    "]}," +
                                    "{'id':150300,'leaf':false,expanded:false,'text':'乌海市国土资源局','children':[" +
                                        "{'id':150301,'leaf':true,'children':null,'text':'市辖区国土资源局'}," +
                                        "{'id':150302,'leaf':true,'children':null,'text':'海勃湾区国土资源局'}," +
                                        "{'id':150303,'leaf':true,'children':null,'text':'海南区国土资源局'}," +
                                        "{'id':150304,'leaf':true,'children':null,'text':'乌达区国土资源局'}" +
                                    "]}," +
                                    "{'id':150400,'leaf':false,expanded:false,'text':'赤峰市国土资源局','children':[" +
                                        "{'id':150401,'leaf':true,'children':null,'text':'市辖区国土资源局'}," +
                                        "{'id':150402,'leaf':true,'children':null,'text':'红山区国土资源局'}," +
                                        "{'id':150403,'leaf':true,'children':null,'text':'元宝山区国土资源局'}," +
                                        "{'id':150404,'leaf':true,'children':null,'text':'松山区国土资源局'}," +
                                        "{'id':150421,'leaf':true,'children':null,'text':'阿鲁科尔沁旗国土资源局'}," +
                                        "{'id':150422,'leaf':true,'children':null,'text':'巴林左旗国土资源局'}," +
                                        "{'id':150423,'leaf':true,'children':null,'text':'巴林右旗国土资源局'}," +
                                        "{'id':150424,'leaf':true,'children':null,'text':'林西县国土资源局'}," +
                                        "{'id':150425,'leaf':true,'children':null,'text':'克什克腾旗国土资源局'}," +
                                        "{'id':150426,'leaf':true,'children':null,'text':'翁牛特旗国土资源局'}," +
                                        "{'id':150428,'leaf':true,'children':null,'text':'喀喇沁旗国土资源局'}," +
                                        "{'id':150429,'leaf':true,'children':null,'text':'宁城县国土资源局'}," +
                                        "{'id':150430,'leaf':true,'children':null,'text':'敖汉旗国土资源局'}" +
                                    "]}," +
                                    "{'id':150500,'leaf':false,expanded:false,'text':'通辽市国土资源局','children':[" +
                                        "{'id':150501,'leaf':true,'children':null,'text':'市辖区国土资源局'}," +
                                        "{'id':150502,'leaf':true,'children':null,'text':'科尔沁区国土资源局'}," +
                                        "{'id':150521,'leaf':true,'children':null,'text':'科尔沁左翼中旗国土资源局'}," +
                                        "{'id':150522,'leaf':true,'children':null,'text':'科尔沁左翼后旗国土资源局'}," +
                                        "{'id':150523,'leaf':true,'children':null,'text':'开鲁县国土资源局'}," +
                                        "{'id':150524,'leaf':true,'children':null,'text':'库伦旗国土资源局'}," +
                                        "{'id':150525,'leaf':true,'children':null,'text':'奈曼旗国土资源局'}," +
                                        "{'id':150526,'leaf':true,'children':null,'text':'扎鲁特旗国土资源局'}," +
                                        "{'id':150581,'leaf':true,'children':null,'text':'霍林郭勒市国土资源局'}" +
                                    "]}," +
                                    "{'id':150600,'leaf':false,expanded:false,'text':'鄂尔多斯市国土资源局','children':[" +
                                        "{'id':150602,'leaf':true,'children':null,'text':'东胜区国土资源局'}," +
                                        "{'id':150621,'leaf':true,'children':null,'text':'达拉特旗国土资源局'}," +
                                        "{'id':150622,'leaf':true,'children':null,'text':'准格尔旗国土资源局'}," +
                                        "{'id':150623,'leaf':true,'children':null,'text':'鄂托克前旗国土资源局'}," +
                                        "{'id':150624,'leaf':true,'children':null,'text':'鄂托克旗国土资源局'}," +
                                        "{'id':150625,'leaf':true,'children':null,'text':'杭锦旗国土资源局'}," +
                                        "{'id':150626,'leaf':true,'children':null,'text':'乌审旗国土资源局'}," +
                                        "{'id':150627,'leaf':true,'children':null,'text':'伊金霍洛旗国土资源局'}" +
                                    "]}," +
                                    "{'id':150700,'leaf':false,expanded:false,'text':'呼伦贝尔市国土资源局','children':[" +
                                        "{'id':150701,'leaf':true,'children':null,'text':'市辖区国土资源局'}," +
                                        "{'id':150702,'leaf':true,'children':null,'text':'海拉尔区国土资源局'}," +
                                        "{'id':150721,'leaf':true,'children':null,'text':'阿荣旗国土资源局'}," +
                                        "{'id':150722,'leaf':true,'children':null,'text':'莫力达瓦达斡尔族自治旗国土资源局'}," +
                                        "{'id':150723,'leaf':true,'children':null,'text':'鄂伦春自治旗国土资源局'}," +
                                        "{'id':150724,'leaf':true,'children':null,'text':'鄂温克族自治旗国土资源局'}," +
                                        "{'id':150725,'leaf':true,'children':null,'text':'陈巴尔虎旗国土资源局'}," +
                                        "{'id':150726,'leaf':true,'children':null,'text':'新巴尔虎左旗国土资源局'}," +
                                        "{'id':150727,'leaf':true,'children':null,'text':'新巴尔虎右旗国土资源局'}," +
                                        "{'id':150781,'leaf':true,'children':null,'text':'满洲里市国土资源局'}," +
                                        "{'id':150782,'leaf':true,'children':null,'text':'牙克石市国土资源局'}," +
                                        "{'id':150783,'leaf':true,'children':null,'text':'扎兰屯市国土资源局'}," +
                                        "{'id':150784,'leaf':true,'children':null,'text':'额尔古纳市国土资源局'}," +
                                        "{'id':150785,'leaf':true,'children':null,'text':'根河市国土资源局'}" +
                                    "]}," +
                                    "{'id':150800,'leaf':false,expanded:false,'text':'巴彦淖尔市国土资源局','children':[" +
                                        "{'id':150801,'leaf':true,'children':null,'text':'市辖区国土资源局'}," +
                                        "{'id':150802,'leaf':true,'children':null,'text':'临河区国土资源局'}," +
                                        "{'id':150821,'leaf':true,'children':null,'text':'五原县国土资源局'}," +
                                        "{'id':150822,'leaf':true,'children':null,'text':'磴口县国土资源局'}," +
                                        "{'id':150823,'leaf':true,'children':null,'text':'乌拉特前旗国土资源局'}," +
                                        "{'id':150824,'leaf':true,'children':null,'text':'乌拉特中旗国土资源局'}," +
                                        "{'id':150825,'leaf':true,'children':null,'text':'乌拉特后旗国土资源局'}," +
                                        "{'id':150826,'leaf':true,'children':null,'text':'杭锦后旗国土资源局'}" +
                                    "]}," +
                                    "{'id':150900,'leaf':false,expanded:false,'text':'乌兰察布市国土资源局','children':[" +
                                        "{'id':150901,'leaf':true,'children':null,'text':'市辖区国土资源局'}," +
                                        "{'id':150902,'leaf':true,'children':null,'text':'集宁区国土资源局'}," +
                                        "{'id':150921,'leaf':true,'children':null,'text':'卓资县国土资源局'}," +
                                        "{'id':150922,'leaf':true,'children':null,'text':'化德县国土资源局'}," +
                                        "{'id':150923,'leaf':true,'children':null,'text':'商都县国土资源局'}," +
                                        "{'id':150924,'leaf':true,'children':null,'text':'兴和县国土资源局'}," +
                                        "{'id':150925,'leaf':true,'children':null,'text':'凉城县国土资源局'}," +
                                        "{'id':150926,'leaf':true,'children':null,'text':'察哈尔右翼前旗国土资源局'}," +
                                        "{'id':150927,'leaf':true,'children':null,'text':'察哈尔右翼中旗国土资源局'}," +
                                        "{'id':150928,'leaf':true,'children':null,'text':'察哈尔右翼后旗国土资源局'}," +
                                        "{'id':150929,'leaf':true,'children':null,'text':'四子王旗国土资源局'}," +
                                        "{'id':150981,'leaf':true,'children':null,'text':'丰镇市国土资源局'}" +
                                    "]}," +
                                    "{'id':152200,'leaf':false,expanded:false,'text':'兴安盟国土资源局','children':[" +
                                        "{'id':152201,'leaf':true,'children':null,'text':'乌兰浩特市国土资源局'}," +
                                        "{'id':152202,'leaf':true,'children':null,'text':'阿尔山市国土资源局'}," +
                                        "{'id':152221,'leaf':true,'children':null,'text':'科尔沁右翼前旗国土资源局'}," +
                                        "{'id':152222,'leaf':true,'children':null,'text':'科尔沁右翼中旗国土资源局'}," +
                                        "{'id':152223,'leaf':true,'children':null,'text':'扎赉特旗国土资源局'}," +
                                        "{'id':152224,'leaf':true,'children':null,'text':'突泉县国土资源局'}" +
                                    "]}," +
                                    "{'id':152500,'leaf':false,expanded:false,'text':'锡林郭勒盟国土资源局','children':[" +
                                        "{'id':152501,'leaf':true,'children':null,'text':'二连浩特市国土资源局'}," +
                                        "{'id':152502,'leaf':true,'children':null,'text':'锡林浩特市国土资源局'}," +
                                        "{'id':152522,'leaf':true,'children':null,'text':'阿巴嘎旗国土资源局'}," +
                                        "{'id':152523,'leaf':true,'children':null,'text':'苏尼特左旗国土资源局'}," +
                                        "{'id':152524,'leaf':true,'children':null,'text':'苏尼特右旗国土资源局'}," +
                                        "{'id':152525,'leaf':true,'children':null,'text':'东乌珠穆沁旗国土资源局'}," +
                                        "{'id':152526,'leaf':true,'children':null,'text':'西乌珠穆沁旗国土资源局'}," +
                                        "{'id':152527,'leaf':true,'children':null,'text':'太仆寺旗国土资源局'}," +
                                        "{'id':152528,'leaf':true,'children':null,'text':'镶黄旗国土资源局'}," +
                                        "{'id':152529,'leaf':true,'children':null,'text':'正镶白旗国土资源局'}," +
                                        "{'id':152530,'leaf':true,'children':null,'text':'正蓝旗国土资源局'}," +
                                        "{'id':152531,'leaf':true,'children':null,'text':'多伦县国土资源局'}" +
                                    "]}," +
                                    "{'id':152900,'leaf':false,expanded:false,'text':'阿拉善盟国土资源局','children':[" +
                                        "{'id':152921,'leaf':true,'children':null,'text':'阿拉善左旗国土资源局'}," +
                                        "{'id':152922,'leaf':true,'children':null,'text':'阿拉善右旗国土资源局'}," +
                                        "{'id':152923,'leaf':true,'children':null,'text':'额济纳旗国土资源局'}" +
                                    "]}" +
                                "]";

            context.Response.Write(strTreeNode);

如此,上面所述的效果就实现了……

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简单树组织数据格式化为标准树组织数据

    在工作中,很多时候会遇到树组织,但是从数据库里面查询出来的结果是一个简单的树组织,这就需要将简单的树组织转换为标准的树组织,以便使用,本文分享一个简单的func...

    lzugis
  • 教你如何拔取百度地图POI兴趣点

    调用聚合数据,首先得注册聚合。聚合数据提供的百度地图POI的接口有三个:数据分类,查询数据和获取周边数据。想要获取百度POI兴趣点,涉及到的接口为数据分类,查询...

    lzugis
  • 巧用Arcgis Server的REST接口实现OL2中WMS添加过滤

    在实际的应用中,很多时候我们需要对展示的图层进行属性或者空间的过滤,在Geoserver发布的WMS中,可以通过CQL_FILTER来设置过滤条件,但是Arcg...

    lzugis
  • Zookeeper 集群搭建

    目标 在 3 台服务器上搭建 Zookeeper 的集群环境,配置完成后,验证是否正确可用 搭建思路 (1)在3台服务器上安装 Zookeeper (2)...

    dys
  • 如何用Python处理自然语言?(Spacy与Word Embedding)

    本文教你用简单易学的工业级Python自然语言处理软件包Spacy,对自然语言文本做词性分析、命名实体识别、依赖关系刻画,以及词嵌入向量的计算和可视化。

    用户2930930
  • 海星、蜘蛛与区块链

    “去中心化”这个词现在很流行,来源于Decentralization,有人翻译为“去中介化”,或干脆就叫“P2P”,以免给集权组织造成不适感。去中心化并不代表着...

    申龙斌
  • Laravel 第三方登陆之 Socialite Providers

    Laravel 框架在 PHP 以优雅著称,得到不少同行之人称赞;也招揽了,无数的第三方扩展包,扩展了框架的各个方面功能,本篇文章,采用 Socialite P...

    霡霂
  • Flutter Widget框架之旅 顶

    Flutter小部件采用现代反应式框架构建,从React中获得灵感。 中心思想是你从小部件中构建你的UI。 小组件描述了他们的视图在给定其当前配置和状态时应该看...

    南郭先生
  • 用Python玩转微信的正确姿势!

    0. itchat 最近研究了一些微信的玩法,我们可以通过网页版的微信微信网页版,扫码登录后去抓包爬取信息,还可以post去发送信息。 然后发现了itchat这...

    Python中文社区
  • 可复现的图像降噪算法总结——超赞整理

    大多数情况下,图像降噪都是ill-posed的问题。因为通过有噪音的观察,总是无法逆向求得唯一正确的干净图片。就好像让你解一个超越方程一样,不借助其他额外的条件...

    AI算法与图像处理

扫码关注云+社区

领取腾讯云代金券