extjs tree下拉列表_EXTJS下拉树ComboBoxTree参数提交及回显方法

http://blog.csdn.net/wjlht/article/details/6085245

使用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('');

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中添加该隐藏字段就可以提交参数了。

添加该隐藏字段代码：

至于向comboBoxTree赋值，则在javascript中直接调用函数comboBoxTree.setValue(),例如：

comboBoxTree.setValue({id:'0',text:'新闻类型'})

至此，comboxTree的传值和回显就全部解决了，大家就可以在项目中使用comboBoxTree来显示下拉树了。对于在需要将类型或单位无限级划分的地方比较适用。