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('<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来显示下拉树了。对于在需要将类型或单位无限级划分的地方比较适用。