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;
}
});
上一篇: etcd 备份与恢复
下一篇: etcd :备份与恢复