Extjs3.0拓展comboBox成comboBoxTree

直接贴代码：

Ext.ns("GDRP.ui");
/**  
 * 下拉列表选择树  
 * <br>  
 * 依赖EXTJS3版本  
 */

GDRP.ui.ComboBoxTree = Ext
        .extend(
                Ext.form.ComboBox,
                {
                    /**  
                     * 回调函数,用于传递选择的id，text属性  
                     *   
                     * @type  
                     */
                    //callback : Ext.emptyFn,
                    store : new Ext.data.SimpleStore({
                        fields : [],
                        data : [ [] ]
                    }),
                    editable : this.editable || false,
                    mode : 'local',
                    emptyText : this.emptyText || "请选择",
                    allowBlank : this.allowBlank || true,
                    blankText : this.blankText || "必须输入!",
                    triggerAction : 'all',
                    maxHeight : 200,
                    anchor : '95%',
                    displayField : 'text',
                    valueField : 'id',
                    tpl : "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",
                    selectedClass : '',
                    onSelect : Ext.emptyFn,
                    /**  
                     * 根的名字  
                     *   
                     * @type String  
                     */
                    rootText : this.rootText || 'root',
                    /**  
                     * 树的请求地址  
                     *   
                     * @type String  
                     */
                    treeUrl : this.treeUrl,
                    tree : null,
                    initComponent : function() {

                        this.tree = new Ext.tree.TreePanel({
                            height : 200,
                            scope : this,
                            autoScroll : true,
                            split : true,
                            root : new Ext.tree.AsyncTreeNode({
                                expanded : true,
                                id : '_fatherCode',
                                text : "中国"
                            }),

                            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 != '_fatherCode') {
                                    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('tree');
                            //this.tree.expandAll();
                        });

                        GDRP.ui.ComboBoxTree.superclass.initComponent
                                .call(this);
                    }

                })

定义的代码：

   Ext.onReady(function() {    
        new GDRP.ui.ComboBoxTree({    
            renderTo:"cbt",    
            treeUrl:"combox.jsp",    
            editable:false,    
            //rootText:"选择公司",    
            valueField:"com",    
            displayField:"_com",    
            callback:function(id,text){    
                alert(id);    
                alert(text);  
                //可以做更多的处理。   
            }    
        });    
})

数据是随便弄的一个jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
        String strTreeNode = "[" +
"{'id':101,'leaf':false,expanded:false,'text':'海南省','children':[" +
"{'id':10101,'leaf':true,'children':null,'text':'海口市',checked:false}," +
"{'id':10102,'leaf':true,'children':null,'text':'三亚市',checked:false}," +
"{'id':10103,'leaf':true,'children':null,'text':'儋州市',checked:false}," +
"]}," +
"{'id':102,'leaf':false,expanded:false,'text':'广东省','children':[" +
"{'id':10201,'leaf':true,'children':null,'text':'广州市',checked:false}," +
"{'id':10202,'leaf':true,'children':null,'text':'深圳市',checked:false}," +
"{'id':10203,'leaf':true,'children':null,'text':'肇庆市',checked:false}," +
"]}," +
"{'id':103,'leaf':false,expanded:false,'text':'河北省','children':[" +
"{'id':10301,'leaf':true,'children':null,'text':'保定市',checked:false}," +
"{'id':10302,'leaf':true,'children':null,'text':'石家庄市',checked:false}," +
"{'id':10303,'leaf':true,'children':null,'text':'张家口市',checked:false}," +
"]}]";
response.getWriter().write(strTreeNode);
 %>
然后在页面写个div

<div id="cbt"></div>  效果如图所示：

x