//左边放一个手风琴菜单
var cascadeMenu = new Ext.Panel({
region: 'west',
resizable:true,
title: '功能区',
id:'westMenu',
layout:'accordion',
collapsible:true,
collapseMode:'mini',
collapseFirst:true,
split:true,
width:250,
minSize: 175,
maxSize: 500,
layoutConfig: {
titleCollapse: true,
animate: false,
activeOnTop: false
}
}); //手风琴菜单结束
// 构建左边的菜单
Ext.Ajax.request({
url : 'MenuServlet?action=main',
success : function(response, options) {
var arr = Ext.decode(response.responseText);
for (var i = 0; i < arr.length; i++) {
var panel = new Ext.tree.TreePanel({
id : arr[i].id,
title : arr[i].text,
iconCls : arr[i].iconCls,
autoScroll : true,
border : false,
loader : new MenuLoader({
dataUrl : 'MenuServlet?action=sub&id='+ arr[i].id
}),
root : new Ext.tree.AsyncTreeNode({
expanded : true
}),
listeners:{
'click':function(node){
Ext.get('center_iframe').dom.src = node.attributes.hrefsrc;
if(node.attributes.text!=null){
}
}
},
rootVisible : false
});
cascadeMenu.add(panel);
panel.on('expand', function(p) {
var expires = new Date();
expires.setDate(expires.getDate() + 30);
});
}
cascadeMenu.doLayout();
}
});
后台servlet
if(StringUtils.equals(action, "main")){
Document doc = XMLUtils.load(filePath);
StringBuffer sb = new StringBuffer("[");
if (doc != null) {
Element root = doc.getRootElement();
List els = root.elements();
for (int i = 0; i < els.size(); i++) {
Element el = (Element) els.get(i);
Attribute id = el.attribute("id");
Attribute text = el.attribute("text");
Attribute iconCls = el.attribute("iconCls");
sb.append("{id:'").append(id == null ? "" : id.getValue()).append("',");
sb.append("text:'").append(text == null ? "" : text.getValue()).append("',");
sb.append("iconCls:'").append(iconCls == null ? "" : iconCls.getValue()).append("'},");
}
if(els.size()>0){
sb.deleteCharAt(sb.length()-1);
}
}
sb.append("]");
out.println(sb.toString());
}else if(StringUtils.equals(action, "sub")){
response.setContentType("text/xml");
Document doc=XMLUtils.load(filePath);
String id=request.getParameter("id");
StringBuffer sb=new StringBuffer("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
List services = bean.findAllService();
if(doc!=null){
sb.append("<Menus>");
Element el=doc.getRootElement();
List nodes=el.selectNodes("/Menus/Items[@id='"+id+"']/*");
for(int i=0;i<nodes.size();i++){
Node node=(Node)nodes.get(i);
sb.append(node.asXML());
}
sb.append("</Menus>");
}
out.println(sb.toString());
}
分享到:
相关推荐
Extjs动态菜单可添加子项和编辑子项,拖动保存、dwr实现存储数据。
提供Extjs树的动态菜单生成,已及对树的增删查改该操作
extjs实现动态树加载菜单
EXTJS4 菜单栏
Extjs 下拉菜单实现拼音输入进行检索
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等
extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...
带有 PHP 的 ExtJS 动态菜单这是使用 PHP 的 ExtJS 动态菜单示例,我的意思是使用 PHP,但它可以用任何后端语言完成。 此存储库包含 Ext 项目 5.1 版的“app”文件夹。 菜单由“menu.php”文件定制。 如下: <?...
extjs动态树struts请求数据json数据格式
extjs菜单设计源码,详细的介绍了 如何用extjs 设计菜单
实现了 登录 动态分栏菜单 实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单实现了 登录 动态分栏菜单
NULL 博文链接:https://cat-rat.iteye.com/blog/1462567
extjs4.2 desktop demo 拓展功能:图标换行,拖动,多级开始菜单,修正extjs4.2的一些bug,加了几个桌面图标,纯js无后台程序,无需发布即可浏览。
ExtJS4 2学习 21 动态菜单与表格数据展示操作总结
NULL 博文链接:https://heartneo.iteye.com/blog/1604828
tree 的所有功能 很难得的 我刚调试好 只需要把数据库url 用户名和密码修改 ,就可以运行 extjs 动态树 tree ajax 全部功能 10分一点都不多,绝对值得。
ExtJs菜单导航 可以不用左边的树功能导航,而在一个工具条上放一系列的菜单功能项
axure仿extjs左侧收缩菜单
PS:之后的功能设计中,会发现很多的功能都是重复出现的,就可以考虑建立视图时通过继承的方式来实现,而不需要过多的重复。
后台直接拼接json树形结构 Action直接传到前台