首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Extjs中ComboBoxTree实现的下拉框树效果(自写)

Posted in Javascript onMay 28, 2013

最近涉及到的一个项目中，需要实现ComboBoxTree的效果，首先，看看效果吧……
Extjs中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);

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

Extjs中ComboBoxTree实现的下拉框树效果(自写)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
webpack将js打包后的map文件详解
Feb 22 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 #Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 #Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 #Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 #Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 #Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 #Javascript
使用jquery实现div的tab切换实例代码
May 27 #Javascript
reduce(2) SQLite3(1) 短信验证码(1) GoFrame(3) filter(1) Selenium(1) dockerfile(1) 分布式锁(3) Tsmoothie(1) pytz(1)
You might like
thinkphp的c方法使用示例
2014/02/24 PHP
为你总结一些php信息函数
2015/10/21 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
php中namespace use用法实例分析
2016/01/22 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
Backbone.js中的集合详解
2015/01/14 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访：躲箭真的很难
2014/07/13 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python IDLE清空窗口的实例
2018/06/25 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python实现动态循环输出文字功能
2020/05/07 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
DHC美国官网：日本通信销售第一的化妆品品牌
2017/11/12 全球购物
荷兰音乐会和音乐剧门票订购网站：Topticketshop
2019/08/27 全球购物
到底Java是如何传递参数的？是by value或by reference？
2012/07/13 面试题
建筑项目策划书
2014/01/13 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
电工实训报告总结
2014/11/05 职场文书
清明节寄语2015
2015/03/23 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
react国际化react-intl的使用
2021/05/06 Javascript