项目中使用到了Extjs,使用了Extjs的边框布局,分为top,west,center。
左侧为菜单部分,最初直接写在JS文件中,今天看了一下,觉得这样写对于以后扩展来说不是特别好,但用什么去替换呢,想来想去还是用XML文件替换更方便一些,这样方便扩展,也方便以后添加一个新的菜单。
其实实现原理很简单,关键是C#对于XML文件的解析操作。
操作的第一步当然是要创建XML文件并制定规则:
<?xml version="1.0" encoding="utf-8" ?>
<menuroot>
<menu id="menu1" class="x-hidden" name="菜单一">
<info src="../images/jq.png" alt="菜单栏目一" id="menu1_jq" href="连接地址1" txt="菜单栏目一"/>
</menu>
<menu id="menu2" class="x-hidden" name="菜单二">
<info src="../images/contract.png" alt="菜单栏目二" id="menu2_myFocus" href="连接地址2" txt="菜单栏目一"/>
<info src="../images/contract.png" alt="菜单栏目二" id="menu2_list" href="连接地址3" txt="菜单栏目二"/>
</menu>
</menuroot>
此处定义了二个菜单,以及3个子栏目。在CS文件中只要按照此规则进行文件的读取即可。
public StringBuilder initMenu()
{
StringBuilder sb = new StringBuilder();
StringBuilder sbJs = new StringBuilder();
string str = "";
// 读取配置文件读取XML文件地址
string menuFile = System.Web.HttpRuntime.AppDomainAppPath.TrimEnd('\\') + System.Web.Configuration.WebConfigurationManager.AppSettings["menufilepath"];
XmlDocument doc = new XmlDocument();
doc.Load(menuFile); // 加载XML文件
// 读取子节点
XmlNodeList nodes = doc.DocumentElement.ChildNodes;
if (nodes != null)
{
foreach (XmlNode node in nodes)
{
// 读取菜单节点
string menuId = node.Attributes["id"].Value.ToString(); // 菜单ID
string menuClass = node.Attributes["class"].Value.ToString(); // 菜单样式
string menuName = node.Attributes["name"].Value.ToString(); // 菜单名称
// 菜单栏目
XmlNodeList childNodes = node.ChildNodes;
// 遍历节点
sb.Append(this.createMenuInfo(menuId, menuClass, childNodes));
sbJs.Append(@"
var " + menuId + @" = new Ext.Panel({
frame: true,
title: '" + menuName + @"',
collapsible: true,
contentEl: '" + menuId + @"',
titleCollapse: true
});
");
str += menuId + ",";
}
str = str.Substring(0, str.Length - 1);
sbJs.Append(@"
//添加左边
var west = new Ext.Panel({
id: 'action-panel',
region: 'west',
split: true,
collapsible: true,
collapseMode: 'mini',
header: false,
width: 200,
minWidth: 200,
maxWidth: 200,
border: false,
baseCls: 'x-plain',
items: [" + str + @"]
});
");
}
// 此处于用动态加载一个JS到页面中
HtmlGenericControl script = new HtmlGenericControl("script");
script.Attributes.Add("language", "JavaScript");
script.Attributes.Add("type", "text/javascript");
script.InnerHtml = sbJs.ToString(); // 加载要使用的JS菜单
this.Page.Header.Controls.Add(script);
return sb;
}
这样就实现了动态创建过程,重点就是对于XML文件的读取和XML文件规则的制定。
上面文件方法中的:System.Web.Configuration.WebConfigurationManager.AppSettings["menufilepath"]此处将文件路径保存在WebConfig.xml文件里。
当然写了这么多东西都是为了在页面展示,页面中要给代码留下来相应的位置,以便加载使用:
<%--初始化左侧菜单--%>
<div id="leftMenu" runat="server">
</div>
这样后台只需要调用上面的方法来完成内容的加载:
this.leftMenu.InnerHtml = this.initMenu().ToString();
这样就完成了通过XML文件来动态加载Extjs左侧菜单功能。
个人博客:
www.52cfml.com
分享到:
相关推荐
extjs实现动态树加载菜单
Extjs动态菜单可添加子项和编辑子项,拖动保存、dwr实现存储数据。
extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...
ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能
extjs实现动态树
Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记(一)——准备工作 关于Extjs4开发笔记(二)的补充说明 ...
extjs4.0中,不想一次性加载所有...extjs4.0好像设计上是一个应用对应一个application,所以原先想通过动态加载多个application来实现上面的需求。但是那样会有其问题出现,即使解决,好像也不是很好,所以改用这种方式
Extjs 下拉菜单实现拼音输入进行检索
c#版本Extjs4.1版本的开发,采用Ajax的方式实现Extjs的功能
AJAX: 以JSON数据格式,使用ExtJS构造动态异步加载的树。
js代码,实现了 extjs4.x tabpanel 动态加载panel和html的功能
NULL 博文链接:https://kaobian.iteye.com/blog/996146
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等
ExtJs中Store加载(load)时候提示信息
csdn里有个兄弟类似的东西要10分,而且收录的不全,这个代码本是一个外国朋友的然后国人加了些修改,这里把两个版本同时献上
extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码
Extjs动态Grid的生成 htm