本插件继承于ComboBox！通俗易懂、老少皆宜、不论男女！---叨、校长
由于网上找的插件大多都有bug，特别自己重写了一个，简单实用！
详细说明，与使用范例请看插件注释！
/**
* @description 基于Ext3.4版本实现的（其他版本或许支持，未测！）一个多选下拉树插件！
* 实现功能：1、多选节点！
* 2、自动选中下拉框中已有的节点！
* 3、自动将树节点TEXT赋值给插件的显示值(setValue())!
* @author 叨、校长灬
* @example 参数nodes example:"[{text:'第一',leaf:true,checked:false},{text:'第二',leaf:true,checked:false},{text:'第三',leaf:true,checked:false},{text:'第四',leaf:true,checked:false}]"
* 支持一切动态树加载方式！
* {
xtype:"xz_combotree",
tree:new Ext.tree.TreePanel({
root: new Ext.tree.AsyncTreeNode({
text:'root',
expanded: true,
children:Ext.decode(nodes)
}),
autoScroll:true,
rootVisible:false
})
}
*/
Ext.namespace("Ext.daoXz");
Ext.daoXz.ComboBoxTree= Ext.extend(Ext.form.ComboBox,{
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
mode : 'local',
triggerAction : 'all',
maxHeight : 200,
selectedClass : '',
onSelect : Ext.emptyFn,
initComponent:function(){
Ext.daoXz.ComboBoxTree.superclass.initComponent.call(this);
var _this=this;
var userH=this.tree.treeHeight;
var xzH=this.maxHeight;
var myHeight=userH>xzH?xzH:userH;
this.tplId = Ext.id();
this.tpl = '<div id="' + this.tplId + '" style="height:'+myHeight+';";overflow:auto;"></div>';
this.tree.on("checkchange",this.changeValue,this);
this.tree.on("beforeappend",this.renderNodeCheckedStates,this);
},
//重写onViewClick方法，阻止下拉树点击时自动关闭！
onViewClick : function(doFocus) {
var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
if (r) {
this.onSelect(r, index);
} else if (s.getCount() === 0) {
this.collapse();
}
if (doFocus !== false) {
this.el.focus();
}
},
//监听下拉框expand事件，渲染treepanel
listeners:{
"expand":{
fn:function(){
if (!this.tree.rendered && this.tplId) {
this.tree.render(this.tplId);
}
this.tree.render(this.tplId);
},
single:true
}
},
//对插件设置显示值！
setShowValue:function(val,checked){
var temp=this.getValue();
var allValue="";
if(checked){
if(temp==""){
allValue=val;
}else{
allValue=temp+","+val;
}
}else{
allValue=val;
}
//调用父类方法
this.setValue(allValue);
},
//树节点checked事件的实现，对插件进行赋值和清除已选的值！
changeValue:function(node,checked){
var text=node.text;
if(checked){
this.setShowValue(text,checked);
}else{
var s=this.getValue();
var r=this.getRawValue();
if(s.indexOf(text)==0&&s.indexOf(",")==-1){
s=s.replace(text,"");
}else if(s.indexOf(text)==0&&s.indexOf(",")!=-1){
s=s.replace(text+",","");
}else{
s=s.replace(","+text,"");
}
this.setShowValue(s,checked);
}
},
//自动选中已经赋值的节点！
renderNodeCheckedStates:function(tree,pnode,node){
var text=this.getValue();
var array=text.split(",");
var size=array.length;
for(var i=0;i<size;i++){
if(array[i]==node.text){
node.attributes.checked=true;
}
}
}
})
Ext.reg('xz_combotree', Ext.daoXz.ComboBoxTree);
实例JSP：<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/ComboTree_xz.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
///var nodes="[{text:'第一',id:'first',leaf:true,checked:false},{text:'第二',id:'second',leaf:true,checked:false},{text:'第三',id:'third',leaf:true,checked:false},{text:'第四',id:'fouth',leaf:true,checked:false}]";
var nodes="[";
for(var i=0;i<20;i++){
if(i!=19){
nodes+="{text:'第"+i+"',leaf:true,checked:false},";
}else{
nodes+="{text:'第"+i+"',leaf:true,checked:false}";
}
}
nodes+="]";
new Ext.Window({
width:300,
height:400,
items:[{
xtype:"xz_combotree",
id:"myCombo",
value:"第0,第10",
tree:new Ext.tree.TreePanel({
root: new Ext.tree.AsyncTreeNode({
text:'root',
expanded: true,
children:Ext.decode(nodes)
}),
autoScroll:true,
rootVisible:false
})
},{
xtype:"button",
handler:function(){
alert(Ext.getCmp("myCombo").getValue());
alert(Ext.getCmp("myCombo").getRawValue());
}
}]
}).show();
});
</script>
</head>
<body>
<div id="column-group-grid"></div>
</body>
</html>
分享到：
相关推荐
### ExtJs4 实现下拉树选择框 ComboTree #### 概述 在现代Web应用开发中，ExtJS 是一个非常强大的JavaScript库，用于构建复杂的客户端应用程序。它提供了丰富的组件库，使得开发者能够轻松地创建出功能丰富且交互性...
下拉树（Dropdown Tree）是Ext JS中的一种特殊控件，它结合了下拉列表和树结构的功能，通常用于展示层次化的数据，并让用户从中选择一个或多个项。 下拉树的基本结构由两部分组成：一个文本框和一个关联的下拉面板...
在本项目中，"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件：下拉树（ComboBox with Tree）和下拉表格（ComboBox with Grid）。这两种组件都是在输入框中展示可选择的列表，但呈现形式不同，下拉树以...
标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件，其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架，主要用于构建富客户端Web应用程序，它提供了一系列...
在IT领域，"ext 下拉树demo"是一个典型的前端开发示例，主要用于构建用户界面，特别是在数据管理和展示层级结构时。EXT是一个强大的JavaScript框架，它提供了丰富的组件库，包括下拉树（TreePicker）这样的控件。这...
【标题】"ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree" 暗示这是一个关于Ext JS库中TreePanel组件的实例，其中可能包含了用于创建和管理数据结构的树形视图，以及与数据库交互的功能。 【描述】"ext的树的...
在这个名为"java-ext.zip_ext_ext java_ext 标签_ext java_java ext"的压缩包中，我们找到了关于如何在ExtJS中调用Java JSON服务的示例。 首先，让我们理解JSON（JavaScript Object Notation）。JSON是一种轻量级的...
【标题】"Ext_Demo.rar_DEMO_Ext demo_ext_demo_java ext demo_javaext demo" 指示了一个关于Java与EXT.js集成的演示项目。EXT是一个强大的JavaScript库，用于构建富客户端应用程序，而Java通常在后端提供数据和服务...
Ext下拉列表树是一种在ExtJS框架中实现的组件，它结合了下拉列表和树形结构的功能，为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见，尤其适用于需要展现多级...
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
采用同步树原理，真正可以直接用的下拉树，，希望对你有帮助
标题中的"ext+js.rar_ext_ext js_ext js java_java+ext"似乎是在组合提及几个关键词，包括"ext"，"js"，以及它们与"java"的关联。这些词汇主要涉及JavaScript的一个流行库——Ext JS，它是一个用于构建富客户端Web...
标题中的"Ext2IFS_1_11a.zip"指的是一个名为"Ext2IFS"的软件的1.11a版本的压缩包文件。这个软件主要用于Windows操作系统，它允许用户在Windows环境下访问Unix文件系统。"Ext2IFS"是"Extended 2 Filesystem Interface...
这个API文档的中文版，"Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2"，是针对Ext JS 2.2框架的重要参考资料，对于开发者来说尤其有价值，特别是那些中文为母语的开发者，它使得理解框架的...
S4ROM打包工具，ext4_utils_new ./make_ext4fs -s -l 2088M -a system leilei.img system ./sgs4ext4fs --bloat leilei.img system1.img
标题中的“Ext_Designer_Preview_ext可视化环境_智能感知”指的是使用Ext Designer进行预览，这是一种基于ExtJS的可视化开发工具，它提供了强大的界面设计和布局管理功能。Ext Designer支持用户通过拖放的方式创建和...
标题中的"ext4_unpacker_exe"表明这是一个针对Windows平台的程序，用于处理ext4文件系统。ext4是Linux操作系统中最常见的文件系统格式，主要用于存储和组织文件和目录。由于Windows系统默认不支持ext4，因此需要这样...
标题中的"oa.rar_ext_ext java oa_ext oa_ext tree_java ext tree"似乎是一个组合字符串，它可能代表了某个项目或教程的文件结构。其中，“oa”可能是项目或系统的名称，而“ext”、“java”、“oa_ext”、“tree_...
ext4文件系统相关工具，比如制作ext4文件系统镜像