下拉树ComboBoxTree

在网上搜了两棵下拉树,均有一些小问题,用不了,于是自己参考它们做了一棵下拉树,
代码如下:

/**
* 下拉树ComboBoxTree
* @extend Ext.form.ComboBox
* @xtype 'combotree'
*
* @author chengbao_zhu
*/

/**
* ----------------------
* Demo ComboBoxTree
* ----------------------
*/
/*-------------------------------------------------*
treecombo = {
fieldLabel : '片    源    类    别',
width : 127,
xtype : 'combotree',
passName : 'videoCategory',
allowUnLeafClick : false,
treeHeight:200,
tree : new Ext.tree.TreePanel({
rootVisible : false,
root : new Ext.tree.AsyncTreeNode({
id : 'CategoryRoot',
text : "影片分类",
expanded : true,
loader : new Ext.tree.TreeLoader({
dataUrl : UrlPpts.ajax.vdocategory + '?method=tree'
})
})
}),
allowBlank : false
}
*-----------------------------------------------------*/

ComboBoxTree = Ext.extend(Ext.form.ComboBox, {

/**
* -------------------------------------
* 作为隐藏域的name属性
* -------------------------------------
*/
passName : 'id',

/**
* -------------------------------------
* 是否允许非叶子结点的单击事件
*
* @default false
* -------------------------------------
*/
allowUnLeafClick : true,

/**
* ---------------------
* 树渲染的模板tpl
* ---------------------
*/
// tpl: '<div id="treeTpl"></div>', //html代码
/**
* -----------------------
* 树显示的高度,默认为180
* -----------------------
*/
treeHeight : 180,

store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),

//Default
editable : false, // 禁止手写及联想功能
mode : 'local',
triggerAction : 'all',
maxHeight : 500,
selectedClass : '',
onSelect : Ext.emptyFn,
emptyText : '请选择...',

/**
* 清空值
*/
clearValue : function() {
if (this.passField) {
this.passField.value = '';
}

this.setRawValue('');
},

/**
* 设置传值
* @param passvalue
*/
setPassValue: function(passvalue){
if (this.passField)
this.passField.value = passvalue;
},

/**
* --------------------------------------
* 下拉树被点击事件添加一处理方法
* @param node
* --------------------------------------
*/
onTreeSelected : function(node) {

},

/**
* ----------------------------------
* 树的单击事件处理
* @param node,event
* ----------------------------------
*/
treeClk : function(node, e) {
if (!node.isLeaf() && !this.allowUnLeafClick) {
e.stopEvent();// 非叶子节点则不触发
return;
}
this.setValue(node.text);// 设置option值
this.collapse();// 隐藏option列表

if (this.passField)
this.passField.value = node.id;// 以树的节点ID传递

// 选中树节点后的触发事件
this.fireEvent('treeselected', node);

},

/**
* 初始化
* Init
*/
initComponent : function() {
ComboBoxTree.superclass.initComponent.call(this);
this.tree.autoScroll = true;
this.tree.height = this.treeHeight;
this.tree.containerScroll = false;
this.tplId = Ext.id();
// overflow:auto"
this.tpl = '<div id="' + this.tplId + '" style="' + this.treeHeight
+ '";overflow:hidden;"></div>';

/**
* -----------------------
* 添加treeselected事件,
* 选中树节点会激发这个事
* 件, 参数为树的节点
* ------------------------
*/
this.addEvents('treeselected');
// this.on('treeselected',this.onTreeSelected,this);
},

/**
* ------------------
* 事件监听器
* Listener
* ------------------
*/
listeners : {
'expand' : {
fn : function() {
if (!this.tree.rendered && this.tplId) {

this.tree.render(this.tplId);

}
this.tree.show();
},
single : true
},

'render' : {
fn : function() {

this.tree.on('click', this.treeClk, this);

/**
* -------------------------------------------
* 创建隐藏输入域<input />
* 并将其dom传给passField
* ------------------------------------------
*/
if (this.passName) {
this.passField = this.getEl().insertSibling({
tag : 'input',
type : 'hidden',
name : this.passName,
id : this.passId || Ext.id()
}, 'before', true)
}

this.passField.value = this.passValue !== undefined
? this.passValue
: (this.value !== undefined ? this.value : '');

this.el.dom.removeAttribute('name');
}
},
'beforedestroy' : {
fn : function(cmp) {
this.purgeListeners();
this.tree.purgeListeners();
}
}
}

});

/**
* ---------------------------------
* 将ComboBoxTree注册为Ext的组件,以便使用
* Ext的延迟渲染机制,xtype:'combotree'
* ---------------------------------
*/
Ext.reg('combotree', ComboBoxTree);


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值