使用extjs可以构造出下拉数，但是不方便向form提交参数，在此，笔者想到一个办法，很方便ComboBoxTree向form提交。
原理：
在form中增加一个隐藏的字段，当在comboBoxTree中选定值后自动在隐藏字段中赋值。
为实现此方法，需要重载comboBoxTree中collapse事件方法。
Ext.ux.ComboBoxTree = function(){
this.treeId = Ext.id()+'-tree';
this.maxHeight = arguments[0].maxHeight || arguments[0].height || this.maxHeight;
this.tpl = new Ext.Template('<tpl for="."><div style="height:'+this.maxHeight+'px"><div id="'+this.treeId+'"></div></div></tpl>');
this.store = new Ext.data.SimpleStore({fields:[],data:[[]]});
this.selectedClass = '';
this.mode = 'local';
this.triggerAction = 'all';
this.onSelect = Ext.emptyFn;
this.editable = false;
this.selectNodeModel = arguments[0].selectNodeModel || 'exceptRoot';
Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments);
}
Ext.extend(Ext.ux.ComboBoxTree,Ext.form.ComboBox, {
expand : function(){
Ext.ux.ComboBoxTree.superclass.expand.call(this);
if(!this.tree.rendered){
this.tree.height = this.maxHeight;
this.tree.border=false;
this.tree.autoScroll=true;
if(this.tree.xtype){
this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype);
}
this.tree.render(this.treeId);
var combox = this;
this.tree.on('click',function(node){
var isRoot = (node == combox.tree.getRootNode());
var selModel = combox.selectNodeModel;
var isLeaf = node.isLeaf();
if(isRoot && selModel != 'all'){
return;
}else if(selModel=='folder' && isLeaf){
return;
}else if(selModel=='leaf' && !isLeaf){
return;
}
combox.setValue(node);
combox.collapse();
});
var root = this.tree.getRootNode();
if(!root.isLoaded())
root.reload();
}
},
setValue : function(node){
var text = node.text;
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = node.id;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = node.id;
},
collapse:function(){
Ext.ux.ComboBoxTree.superclass.collapse.call(this);
document.getElementById("myhiddencomboboxtree").value = this.getRawValue();
},
getValue : function(){
return typeof this.value != 'undefined' ? this.value : '';
}
});
Ext.reg('combotree', Ext.ux.ComboBoxTree);
红色部分就是增加的重载代码，作用是当下拉数收起后，将id为myhiddencomboboxtree的隐藏字段赋值，在form中添加该隐藏字段就可以提交参数了。
添加该隐藏字段代码：
<input type="hidden" name="aaa" id="myhiddencomboboxtree" value='hello'/>
至于向comboBoxTree赋值，则在javascript中直接调用函数comboBoxTree.setValue(),例如：
comboBoxTree.setValue({id:'0',text:'新闻类型'})
至此，comboxTree的传值和回显就全部解决了，大家就可以在项目中使用comboBoxTree来显示下拉树了。对于在需要将类型或单位无限级划分的地方比较适用。
