EXTJS 动态生成下来树形框

本例中的Ext.ux.ComboBoxTree对Ext.form.ComboBox控件进行了简单的扩展，将Ext.tree.TreePanel整合进来，以下拉树的形式显示出来。

扩展的功能点：
一、支持form的提交
二、提供属性selectNodeModel，指选择树结点的模式，提供四种模式，分别是
1. all：所有结点都可选中
2. exceptRoot：除根结点，其它结点都可选(默认)
3. folder:只有目录（非叶子和非根结点）可选
4. leaf：只有叶子结点可选

使用方法：
Js代码
var comboBoxTree = new Ext.ux.ComboBoxTree({
renderTo : 'comboBoxTree',
width : 250,
//listWidth:300, 这是设置下拉框的宽度，默认和comBoxTree的宽度相等
tree : new Ext.tree.TreePanel({
bbar: ['名称：',{xtype:'trigger',width:200,triggerClass:'x-form-search-trigger',}],
loader: new Ext.tree.TreeLoader({dataUrl:'getNodes.jsp'}),
root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'})
}),
selectNodeModel:'leaf', //只有选叶子时，才设置值
listeners:{
beforeselect: function(comboxtree,newNode,oldNode){//选择树结点设值之前的事件
//...
},
select: function(comboxtree,newNode,oldNode){//选择树结点设值之后的事件
//...
},
afterchange: function(comboxtree,newNode,oldNode){//选择树结点设值之后，并当新值和旧值不相等时的事件
//...
}
}
});

js : 代码二：
{
columnWidth : .33,
layout : 'form',
defaults : {
anchor : "98%"
},
labelAlign : "right",
labelWidth : 60,

items : [ {
fieldLabel : "所属单位",
xtype : "combotree",
tree : {
xtype : 'treepanel',
bbar : [ '名称：', {
xtype : 'trigger',
id : 'searchName',
width : 200,
triggerClass : 'x-form-search-trigger',
onTriggerClick : search
} ],
loader : new Ext.tree.TreeLoader( {
dataUrl : 'deptManAction!getDeptTree.action'
}),
root : new Ext.tree.AsyncTreeNode( {
id : '0',
text : '根结点'
})
},

//all:所有结点都可选中
//exceptRoot：除根结点，其它结点都可选(默认)
//folder:只有目录（非叶子和非根结点）可选
//leaf：只有叶子结点可选
selectNodeModel : 'all'

} ]
}
按照列布局实现的。