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>();
    }