extjs4 MVC2 TreePanel动态JSON实现

var TreeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: '<%= Url.Action("GetTreeJson", "WareHouseVoucherItem")%>' } }); var TreeMater = Ext.create('Ext.tree.Panel', { title: '物资类型', region: 'west', store: TreeStore, rootVisible: false, cls: 'tree', height: 200, width: 200, dockedItems: [{ xtype: 'toolbar', items: { text: '选择确认', // iconCls: 'x-ok', handler: function() { var records = TreeMater.getView().getChecked(); ids = []; Ext.Array.each(records, function(rec) { ids.push(rec.get('id')); }); if (ids.length < 1) { return null; } typeMaterialStore.load({ params: { TypeIds: ids } }); } } }] });

这段JS能在官方例子找到；

[Serializable] public class GetJSON { public virtual long id { get; set; } public virtual string text { get; set; } public virtual string cls { get; set; } public virtual bool expanded { get; set; } public virtual IList<GetJSON> children { get; set; } public virtual bool leaf { get; set; } public virtual bool @checked { get; set; } }

上面类是用来封装ext Tree JSON的格式。遇到问题是，checked是C#关键字，而我要实现的是带复选框的Tree，用@符号 IList<GetJSON> list = new List<GetJSON>();

public JsonResult GetTreeJson() { IList<GetJSON> list = new List<GetJSON>(); IList<MaterialType> mTypes = MaterialTypeService.SelectAll(); for (int i = 0; i < mTypes.Count(); i++) { if (mTypes[i].ParentType == null) { GetJSON p = new GetJSON(); p.cls = "folder"; p.expanded = true; p.text = mTypes[i].MtName; p.id = mTypes[i].Id; list.Add(p); GetTreeNode(p, mTypes[i]); } } JsonResult jsons = this.Json(list, JsonRequestBehavior.AllowGet); return jsons; } /// <summary> /// /// </summary> /// <returns></returns> public void GetTreeNode(GetJSON p, MaterialType Ptype) { IList<MaterialType> chiltype = new List<MaterialType>(); chiltype = this.MaterialTypeService.FindByPTypeId(Ptype); if (chiltype != null && chiltype.Count() != 0) { IList<GetJSON> childrens = new List<GetJSON>(); p.children = childrens; for (int i = 0; i < chiltype.Count(); i++) { GetJSON cli = new GetJSON(); cli.text = chiltype[i].MtName; cli.@checked = false; cli.cls = "folder"; cli.id = chiltype[i].Id; p.expanded = true; // cli.leaf = true; childrens.Add(cli); GetTreeNode(cli, chiltype[i]); } } else { p.text = Ptype.MtName; p.id = Ptype.Id; p.leaf = true; p.cls = "file"; } }

//MVC2很好的地方是可以自己封装JSON数据格式，我们只要把自己想要的属性加进去就OK.