自己来封装Ext组件6--SteelComboTree

 

-----------------------------------------------------------------------------------------------------------------------

声明一下下：

由于这些东西是我刚写好就贴上来的，没怎么详细的测试过，有BUG那是必须的，这里仅起到抛砖引玉的作用

如果有什么问题，大家可以联系我 [e-mail]  或直接评论， 谢谢！！

文章中后端技术是用的  Nutz  http://nutzam.com/  ---  除SSH之外的另一种选择  （打个小广告，哈哈！！）

------------------------------------------------------------------------------------------------------------------------

 

一个用Tree渲染的Combobox

 

其实这个是本人在网上看到的，顺便也记录在这里了

 

配置代码如下：

 

new Ext.ComboBoxTree({
	renderTo:"cbt",
	treeUrl:"lib/js/form/ComboBoxTree.json",
	editable:false,
	rootText:"选择公司",
	valueField:"com",
	displayField:"_com",
	callback:function(id,text){
		alert(id);
		alert(text);
	}
});

 

源码如下：

/**
 * 下拉列表选择树
 * <br>
 * 依赖EXTJS3版本
 * @class Ext.SteelComboTree
 * @extends Ext.form.ComboBox
 * @author yongtree 
 */
Ext.SteelComboTree = Ext.extend(Ext.form.ComboBox, {
    /**
     * 回调函数,用于传递选择的id，text属性
     * 
     * @type
     */
    callback : Ext.emptyFn,
    store : new Ext.data.SimpleStore({
                fields : [],
                data : [[]]
            }),
    editable : this.editable||false,
    mode : 'local',
    fieldLabel:this.fieldLabel||"",
    emptyText : this.emptyText||"请选择",
    allowBlank : this.allowBlank||true,
    blankText : this.blankText||"必须输入!",
    triggerAction : 'all',
    maxHeight : 200,
    anchor : '95%',
    displayField : 'text',
    valueField : 'id',
    tpl : '',
    selectedClass : '',
    onSelect : Ext.emptyFn,
    /**
     * 根的名字
     * 
     * @type String
     */
    rootText : this.rootText||'root',
    /**
     * 树的请求地址
     * 
     * @type String
     */
    treeUrl : this.treeUrl,
    tree : null,
    initComponent : function() {
		this.tpl = "<tpl for='.'><div style='height:200px'><div id='steel-'"+this.getId()+"></div></div></tpl>";
        this.tree = new Ext.tree.TreePanel({
            height : 200,
            scope : this,
            autoScroll : true,
            split : true,
            root : new Ext.tree.AsyncTreeNode({
                        expanded : true,
                        id : '_oecp',
                        text : this.rootText
                    }),

            loader : new Ext.tree.TreeLoader({
                        url : this.treeUrl

                    }),
            rootVisible : true
            });
        var c = this;
        /**
         * 点击选中节点并回调传值
         */
        this.tree.on('click', function(node) {
                    if (node.id != null && node.id != '') {
                        if (node.id != 'root'){
                            c.setValue(node.text);
                            c.callback.call(this, node.id, node.text);
                            c.collapse();
                        } else {
                            Ext.Msg.alert("提示", "此节点无效，请重新选择!")
                        }

                    }
                })

        this.on('expand', function() {
                    this.tree.render('steel-'+this.getId());
                    this.tree.expandAll();
                });

        Ext.SteelComboTree.superclass.initComponent.call(this);
    }
});
Ext.reg('steelcombotree', Ext.SteelComboTree);