Ext2--含有树的下拉框（代码+图）

一.首先引入对象ComboBoxTree



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


passName : 'id',


allowUnLeafClick : true,


// tpl: '<div id="treeTpl"></div>', //html代码

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('');
},


setPassValue: function(passvalue){
if (this.passField)
this.passField.value = passvalue;
},


onTreeSelected : function(node) {

},


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);

},


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>';


this.addEvents('treeselected');
// this.on('treeselected',this.onTreeSelected,this);
},


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);


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();
}
}
}

});


Ext.reg('combotree', ComboBoxTree);

 

二.生成含有树的下拉框

//定义一个树形
var contenttree = new Ext.tree.TreePanel({
rootVisible:false,
root:new Ext.tree.AsyncTreeNode({
id:'0',
text:'',
expanded:true,
loader:new Ext.tree.TreeLoader({
dataUrl:'operation/base/querycontenttree.jsp'
})
})
});
//树在Load时自动展开
contenttree.on('load', function(node, checked) {
node.expand();
node.eachChild(function(child) {
child.expand();
});
});
//定义下拉树对象
var contenttreecombo = new ComboBoxTree({
width:130,
allowBlank : false,
//allowUnLeafClick:false,//只允许选择叶子
treeHeight:200,
emptyText:'请选择...',
tree:contenttree
});