ExtJs教程----带复选框的菜单

先来张效果图：

代码如下：

需要注意的是:

（1）需要先定义TreeStore,再定义MenuTestTree,最后定义MenuTestWithCheckBox

（2）在菜单子项前面出现复选框的关键是后台返回的Json数据流的每条数据中包含了"checked"属性

//定义获取菜单数据的store
var MenuStore = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: '/Home/GetTreeData',
        reader:
       {
           type: 'json',
           //后台返回的json数据的节点名称需要和"children"保持一致
           rootproperty: 'children',
           successproperty: 'success'
       },

        listeners: {
            exception: function (proxy, response, operation) {
                ext.messagebox.show({
                    title: 'remote exception',
                    msg: response,
                    icon: ext.messagebox.error,
                    buttons: ext.msg.ok
                });
            }
        }
    },
    rootProperty: {
        expanded: true
    }
});

//菜单组建
Ext.define('ExtJS5Example.view.Student.MenuTestTree', {
    extend: 'Ext.tree.Panel',   
    alias: 'widget.StudentMenuTestTree',
    store: MenuStore,
    split: true,
    height: 680,
    minSize: 150,
    rootVisible: false,
    autoScroll: true,
    width: 240,
    layout: 'fit',
    useArrows: true,
    initComponent: function () {
        this.callParent(arguments);
    }
});

//弹窗，将菜单组件包含在内
Ext.define('ExtJS5Example.view.Student.MenuTestWithCheckBox', {
    extend: 'Ext.window.Window',
    alias: 'widget.StudentMenuTestWithCheckBox',
    modal: true,
    title: 'Menu Test',
    autoHeight: true,
    collapsible: false,
    maxHeight: 500,
    height:200,
    autoScroll: true,
    items: [{
        //引用菜单组件
        xtype: 'StudentMenuTestTree',
        header: false,
        width: 800,
        listeners: {
            checkchange: function (column, recordIndex, checked) {
                var self = this;
                var currentIndex = column.id;
                var checkedItems = self.getChecked();
                //用户只能选择一条数据
                for (var i = 0; i < checkedItems.length; i++) {
                        if (checkedItems[i].id != currentIndex) {
                            self.getStore().getNodeById(checkedItems[i].id).set('checked', false);
                        }
                }

C# 代码

 public String GetTreeData()
        {
            try{
                var TreeList = new List<TreeModel>();
                var classList =new List<TreeModel>();
                TreeModel TreeModel1 = new TreeModel()
                {
                     id="1",
                     leaf=false,
                     text="学生信息管理"
                };
                TreeModel TreeModel2 = new TreeModel()
                {
                    id = "2",
                    leaf = false,
                    text = "教师信息管理"
                };
                 TreeModel TreeModel4 = new TreeModel()
                {
                    id = "4",
                    leaf = false,
                    text = "添加课程",
                };
                TreeModel TreeModel5 = new TreeModel()
                {
                    id = "5",
                    leaf = false,
                    text = "删除课程",
                };
                classList.Add(TreeModel4);
                classList.Add(TreeModel5);
                TreeModel TreeModel3 = new TreeModel()
                {
                    id = "3",
                    leaf = false,
                    text = "课程信息管理",
                    children = classList
                };
                TreeList.Add(TreeModel1);
                TreeList.Add(TreeModel2);
                TreeList.Add(TreeModel3);
                var result2 = ListToJson(TreeList, "children");
                return result2;
            }
            catch (Exception e)
            {
                return null;
            }
        }

        public static string ListToJson(List<TreeModel> list, string jsonName)
        {
            StringBuilder Json = new StringBuilder();
            if (list.Count > 0)
            {
                Json.Append("[");
                for (int i = 0; i < list.Count; i++)
                {
                    if (list[i].children.Count > 0)
                    {
                        Json.Append("{\"" + jsonName + "\":[");
                        for (var j = 0; j < list[i].children.Count; j++)
                        {
                            Json.Append("{\"" + jsonName + "\":[],");
                            Json.Append("\"" + "id" + "\":" + "\"" + list[i].children[j].id.ToString() + "\",");
                            Json.Append("\"" + "text" + "\":" + "\"" + list[i].children[j].text.ToString() + "\",");
                            Json.Append("\"" + "leaf" + "\":" + "false,");
                            Json.Append("\"" + "checked" + "\":" + "false");
                            Json.Append("}");
                            if (j < list[i].children.Count - 1)
                            {
                                Json.Append(",");
                            }
                        }
                        Json.Append("],");
                    }
                    else
                    {
                        Json.Append("{\"" + jsonName + "\":[],");
                    }
                    Json.Append("\"" + "id" + "\":" + "\"" + list[i].id.ToString() + "\",");
                    Json.Append("\"" + "text" + "\":" + "\"" + list[i].text.ToString() + "\",");
                    if (list[i].children.Count == 0)
                    {
                        Json.Append("\"" + "leaf" + "\":" + "false,");
                        Json.Append("\"" + "checked" + "\":" + "false");
                    }
                    else
                    {
                        Json.Append("\"" + "leaf" + "\":" + "false");
                    }

                    Json.Append("}");
                    if (i < list.Count - 1)
                    {
                        Json.Append(",");
                    }
                }
            }
            Json.Append("]");
            return Json.ToString();
        }