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來顯示下拉樹了。對於在需要將類型或單位無限級划分的地方比較適用。