【叨、校长】Ext 下拉树插件_ComboTree_xz
本插件继承于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>