Extjs实现类似树下拉框Ext.form.TriggerField

网上找了些资料，写了个方便以后进行查找

构建一棵树：

var tl = new Ext.tree.TreeLoader({});
    var tp = new Ext.tree.TreePanel({
        animate: true,
        frame: true,
        autoScroll: true,
        height: 270,
        width: 200,
        border: false,
        useArrows: false,
        trackMouseOver: false,
        lines: false,
        listeners: {
            'click': function (node, e) {
                field.setValue(node.text);//点击把值填充到下拉框中
            }
        },
        loader: tl
    });

    var root = new Ext.tree.AsyncTreeNode({
        id: 'root',
        text: '所有省份',
        expanded: true
    });
    tp.setRootNode(root);

 

//后台加载数据

tp.on("beforeload", function (node) {
        tl.dataUrl = '/Index/mainIndex';
});

 

//创建一个菜单用来存储 树

 var selectMenu = new Ext.menu.Menu({
        items: [tp]
    });

//创建一个下拉框，因为ComboBox是继承于Ext.form.TriggerField,重写他的onTriggerClick()函数实现弹出窗口
    var field = new Ext.form.TriggerField({
        fieldLabel: '选择',
        name: 'name',
        onTriggerClick: function () {
            if (this.menu == undefined) {
                this.menu = selectMenu;
            }
            this.menu.show(this.el, 'tl-bl?');//'tl-bl?'表示相对于下拉框显示的位置
        }
    })

 

//取树的后台代码

public JsonResult mainIndex()
        {
            List<Node> nodes = new List<Node>();
            Node nodesOne = null;
            Node nodesTwo = null;
            var province = proObject.GetList("ProvinceInfo");
            foreach (ProvinceInfo pro in province)
            {
                nodesOne = new Node();
                nodesOne.id = "pro_" + pro.ProvinceID;
                nodesOne.text = pro.ProvinceName;
                nodesOne.leaf = false;
                IList<CriteriaProjection> fields = new List<CriteriaProjection>()
                 {
                new CriteriaProjection(){ fieldName = "ProvinceID", fieldValue = pro.ProvinceID, expression= CExpression.Eq}
                 };
                var city = cityObject.GetList(fields, null, 0, 0);
                foreach (CityInfo ci in city)
                {
                    nodesTwo = new Node();
                    nodesTwo.id = "city_" + ci.CityID;
                    nodesTwo.text = ci.CityName;
                    nodesTwo.leaf = true;
                    nodesOne.children.Add(nodesTwo);
                }
                nodes.Add(nodesOne);
            }
            return Json(nodes, JsonRequestBehavior.AllowGet);
        }
    }

 

//Node 类

public class Node
    {
        public string id;
        public string text;
        public bool leaf;
        public List<Node> children = new List<Node>();
    }