欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ext combobox下拉树的实现

程序员文章站 2022-07-13 22:37:21
...
项目需要,对ext的bombobox实现了子类,来展示下拉列表树。哪有不好的,网友多多指正

/*
* ext-3.2.1版本点击树的节点时,树自动隐藏,可能是这个版本的一个bug,下面是覆盖一个方法,解决此bug
*/
Ext.override(Ext.form.ComboBox, {
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();
}
}
});

Ext.namespace("Tm");
/**
* 下拉列表树,不带复选框,可控制只选叶子节点和所有节点,支持异步和本地加载
* 扩展属性:
* @tree 树对象
* @treeurl 树请求地址,如果是null,则本地加载
* @treeRootVisible 树根节点是否可见,true为可见,false是不可见,默认是不可见
* @treeValue 根节点的默认子节点,本地加载
* 目前问题:初始化对象必须传递renderTo属性
* @treeHeight 树面板的默认高度
* @onlyLeafCheckable 是否只允许选择叶子节点,true是只允许选择叶子节点,false所有节点均可选择
* @treeRootText 根节点的text
* @class Tm.TreeComboBox
* @extends Ext.form.ComboBox
*
* 案例页面extendcombox.jsp
*/
Tm.TreeComboBox = Ext.extend(Ext.form.ComboBox, {
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
tree:null,//树对象
treeurl:null,//树url
treeRootVisible:null,//根节点是否可见,默认为false,不可见
treeValue:null,//根的默认节点
treeHeight:120,//默认树的面板高度
treeRootText:'根节点',
onlyLeafCheckable:false,//默认所有节点均可选择,如果是true,只允许选择叶子节点
constructor: function(config) {
this.tpl= '<tpl for="."><div style="height:'+(this.treeHeight)+'px"><div id="'+this.renderTo+'_tree"></div></div></tpl>';
Tm.TreeComboBox.superclass.constructor.apply(this, arguments);
this._init();
},
/*
*初始化
*/
_init:function(){
this.getTree();
this.on("expand",function(){
this.tree.render(this.renderTo+'_tree');
});
//树点击添加监听
this.tree.addListener("click",function(node,e){
e.stopEvent();
if(this.onlyLeafCheckable){
if(!node.leaf){
node.expand();
return;
}
}
if(node.disabled)return;
this.setValue(node.id);
this.setRawValue(node.text);
this.collapse();
},this);
},

/*
*获取树对象
*/
getTree: function(){

if(!this.tree){
var root =new Ext.tree.AsyncTreeNode({
id:'root',
text:this.treeRootText,
children:this.treeValue
});
var load1=new Ext.tree.TreeLoader();
var load2=new Ext.tree.TreeLoader({
dataUrl:this.treeurl
})
this.tree=new Ext.tree.TreePanel({
root:root,//定位到根节点
animate:true,//开启动画效果
enableDD:false,//不允许子节点拖动
border:false,//没有边框
rootVisible:this.treeRootVisible||false,//设为false将隐藏根节点
loader:this.treeurl==null?load1:load2
});
}
return this.tree;
}
});
相关标签: EXT JSP