在前期搭建框架的时候,大约花了一个月的时间来解决技术难点问题。刚才对这个mvc.ext.net什么都不了解,都是从头开始学习,包括mvc4的语法,mvc与ext.net的结合使用。刚开始一直在写一个实例就是树的生成,其实弄明白以后非常简单,先贴出图片(我还是用实例的吧)
我使用的是异步加载,上一篇的第三张图左侧树实现方式是一样的。忘记说了我用的是ext.net2.1.1版本的,因为这个版本可以破解,还可以修改源代码。先放上这棵树的源代码吧。
1 @{ 2 ViewBag.Title = "TreePanel using DirectMethod"; 3 Layout = "~/Views/Shared/_BaseLayout.cshtml"; 4 } 5 6 @section headtag 7 { 8 <script> 9 var nodeLoad = function (store, operation, options) { 10 var node = operation.node; 11 12 App.direct.NodeLoad(node.getId(), { 13 success : function (result) { 14 node.set('loading', false); 15 node.set('loaded', true); 16 node.appendChild(result); 17 node.expand(); 18 }, 19 20 failure : function (errorMsg) { 21 Ext.Msg.alert('Failure', errorMsg); 22 } 23 }); 24 25 return false; 26 }; 27 </script> 28 } 29 30 @section example 31 { 32 <h1>TreePanel using DirectMethod</h1> 33 @( 34 Html.X().TreePanel() 35 .Title("Tree") 36 .Width(300) 37 .Height(450) 38 .Border(false) 39 .Root(Html.X().Node().NodeID("0").Text("Root")) 40 .Listeners(l => { l.BeforeLoad.Fn = "nodeLoad"; }) 41 ) 42 }
1 [DirectController(AreaName = "TreePanel_Loaders", GenerateProxyForOtherControllers = false, IDMode = DirectMethodProxyIDMode.None)] 2 public class Direct_MethodController : Controller 3 { 4 public ActionResult Index() 5 { 6 return View(); 7 } 8 9 [DirectMethod] 10 public ActionResult NodeLoad(string node) 11 { 12 NodeCollection nodes = new Ext.Net.NodeCollection(); 13 14 if (!string.IsNullOrEmpty(node)) 15 { 16 for (int i = 1; i < 6; i++) 17 { 18 Node asyncNode = new Node(); 19 asyncNode.Text = node + i; 20 asyncNode.NodeID = node + i; 21 nodes.Add(asyncNode); 22 } 23 24 for (int i = 6; i < 11; i++) 25 { 26 Node treeNode = new Node(); 27 treeNode.Text = node + i; 28 treeNode.NodeID = node + i; 29 treeNode.Leaf = true; 30 nodes.Add(treeNode); 31 } 32 } 33 34 return this.Direct(nodes); 35 } 36 }
就是这点代码我自己写的时候写了快一个月(我是说模仿)因为中间出现一个问题,在点击节点的加号时总是没有任何的反应,最终找到了原因在这里贴出来以免继续犯错。
1.首先类前面的DirectController必须要加,我就是因为这个原因,我终于明白公司为什么要招有经验的人,效率和成本
2.如果使用前端请求后台方法在方法上需要添加[DirectMethod],类似 App.direct.NodeLoad的异步请求。在这里我遇到一个问题,如果我想使用同步官网上面说使用async设置为false,但是总是不行,不起任何作用,没办法我只能使用jquery中的ajax方法
3.App.direct这个调用方法的命名空间,App.direct这是系统默认的命名空间,如果要想修改这个命名空间,把Controller对应的方法上的属性DirectMethod修改成 [DirectMethod(Namespace="")]就可以了
4.在view中必须要加上@X.ResourceManager(),如果不在系统在运行时出错。
在做这棵树的时候还遇到了各种各样的问题有时候只能用间接的方式来解决了。如果有在使用这个框架的码农我很乐意和大家交流.757966892这是我的q
到目前还有一个问题没有解决,就是怎样在异步的模式下默认展开第一个节点。
树节点有很多的事件比如ItemClick,或者右击事件ItemContextMenu下面的是我的一个实例
1 Html.X().TreePanel() 2 .TitleCollapse(false) 3 .RootVisible(false) 4 .ID("tpl" + item.MenuName) 5 .Tag(item) 6 //.AutoScroll(true) 7 .Border(false) 8 .Store( 9 Html.X().TreeStore() 10 .ID("store" + item.MenuName) 11 .Proxy(Html.X().AjaxProxy().Url(Url.Action("GetChildMenu", "Main"))) 12 .Parameters(new { menuName = item.MenuName }) 13 ) 14 .Root(Html.X().Node().NodeID(item.MenuId.ToString()).Text("")) 15 .Listeners(l => l.ItemContextMenu.Fn = "RightMenu") 16 .Listeners(l => l.ItemClick.Handler = "var where=GetQueryWhere(record);App.searchWhere.setValue(''); App.direct.GetTabView(record.data.id,where,App.searchWhere.getValue());"))
1 X.Menu().ID("ctmFolderMenu") 2 .Items( 3 X.MenuItem().Text("目录属性").Icon(Icon.Folder).Listeners(l => l.Click.Handler = "App.direct.SetFolderProperty()"), 4 X.MenuItem().Text("刷新目录").Icon(Icon.PageRefresh).Listeners(l => l.Click.Handler = "refleshFolder();"), 5 X.MenuItem().Text("删除目录").Icon(Icon.Delete).OnClientClick("DeleteAllFolderData(0);"), 6 X.MenuItem().Text("删除目录数据").Icon(Icon.Delete).OnClientClick("DeleteAllFolderData(1);"), 7 X.MenuItem().Text("自动分类方案").Icon(Icon.Group).Listeners(l => l.Click.Handler = "App.direct.SetAutoGroupScheme();"), 8 X.MenuItem().Text("明细表管理").Icon(Icon.ApplicationViewDetail).DirectClickUrl(Url.Action("FolderAttributeSet", "Main", new { title = "明细表管理", setType = "DetailManage" })), 9 X.MenuItem().Text("列表设置").Icon(Icon.Table).DirectClickUrl(Url.Action("FolderAttributeSet", "Main", new { title = "列表设置", setType = "ListSet" })), 10 X.MenuItem().Text("表单设置").Icon(Icon.ApplicationForm).DirectClickUrl(Url.Action("Index", "FormSet")) 11 )
在点击目录树的时候右边数据区域会刷新数据App.direct.GetTabView(record.data.id,where,App.searchWhere.getValue())这就是局部视图,其实实例中也提到了。