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

先来张效果图：

代码如下：

需要注意的是:

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

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

//定义获取菜单数据的storevar 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();        }