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'

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