ext combobox下拉树的实现

项目需要,对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;
}
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值