效果图片:
树菜单的建立,这里将动态树的产生:
声明:homeTree
var homeTree = new Neo.index.HomeTree({
collapsible : true,
split : true,
margins : '5 0 5 5',
cmargins : '5 5 5 5'
});
其中这个Neo.index.HomeTree是一个js文件,如下
HomeTree.js:
Ext.namespace("Neo");
Ext.namespace("Neo.index");
Neo.index.HomeTree = Ext.extend(Ext.tree.TreePanel, {
id : 'homeTree',
region : 'west',
minSize : 100,
maxSize : 300,
collapsible : true,
border : false,
rootVisible : false,
lines : false,
autoScroll : true,
root : new Ext.tree.AsyncTreeNode({
id : 'tree-root',
text : "系统功能",
loader : new Ext.tree.TreeLoader({
dataUrl : 'common.htm?action=getHomeMenu', //调用controller的方法,加载树的数据项
listeners : {
"beforeload" : function(treeloader, node) {
treeloader.baseParams = {
id : node.id,
method : 'POST'
};
},
"click" : function(node, event) {
// 叶子节点点击不进入链接
if (node.isLeaf()) {
// 显示叶子节点菜单
event.stopEvent();
ALLEvents(node);
} else {
// 不是叶子节点不触发事件
event.stopEvent();
// 点击时展开
node.toggle();
}
}
}
})
}),
collapseFirst : false,
initComponent : function() {
Ext.apply(this, {
});
Neo.index.HomeTree.superclass.initComponent.apply(this,
arguments);
},
onRender : function() {
Neo.index.HomeTree.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('hometree', Neo.index.HomeTree);
Conntroller的getHomeMenu方法:
public void getHomeMenu(HttpServletRequest request, HttpServletResponse response)
throws Exception {
log.info("Someone come from ip address <" + request.getRemoteAddr()
+ ">");
log.debug("reach CommonController getMenu");
//树的叶子都是死的,大家可以换成对数据库的方式
String jsonMenu =
"[{text : '快速连接',iconCls: 'icon-hotel',expanded : true,children : [{text : '最新动态',id : 'donTai',iconCls : 'icon-dongtai',leaf : true},{text : '最新公告',id : 'gongGao',iconCls : 'icon-gonggao', leaf : true},{text : '文件下载',id : 'downFile',iconCls : 'icon-file',
leaf : true},{text : '图片展览',id : 'picture',iconCls : 'icon-pic', leaf : true}]}]";
System.out.println(jsonMenu);
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(jsonMenu);
}
为这棵树添加点击事件:
homeTree.on("click",function(node,event){
if(node.id=="donTai")//donTai是他的节点id
{
tabs.add(new Neo.frontdesk.mainview.DongTaiGrid({//DongTaiGrid是一个js文件
id : 'dongTai',
title : '最 新 动 态',
closable : true//是否允许关闭
})).show();
}else if(node.id=="gongGao")
{
tabs.add(new Neo.frontdesk.mainview.GongGaoGrid({
id : 'gongGao',
title : '最 新 公 告',
closable : true
})).show();
}else if(node.id=="downFile")
{
tabs.add(new Neo.frontdesk.mainview.FileDownload({
id : 'filedownload',
title : '文 件 下 载',
closable : true
})).show();
}else if(node.id=="picture")
{
tabs.add(new Ext.Panel({//这个是一个图片显示的panel,参照官方的例子,没有额外的js文件
id:'images-view',
frame:true,
autoHeight:true,
collapsible:true,
closable : true,
bodyStyle:'background-color:#FEFEFE;',//设置面板体的背景色
style : 'padding:3px 3px 3px 3px',
layout:'fit',
title:'活 动 图 片',
header : false,
iconCls : 'icon-pic', //这tab的icon
items: new Ext.DataView({ //这里用到了DataView
store: picStore=new Ext.data.JsonStore({
url: 'common.htm?action=ReadAllPictures',
autoLoad: true,
root: 'data',
id:'name',
fields:[
'picName', 'picUrl',
]
}),
style : 'padding:10px 10px 10px 10px',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumbnail" id="{picName}">',//注意这个div样式的应用,没有这个样式则显示效果不佳
'<div class="thumb"><a href="public/images/HuoDong_Pics/{picUrl}" target="_blank" class="photo"><img src="public/images/HuoDong_Pics/{picUrl}" title="{picName}"></a></div>',
'<span class="x-editable">{picName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
),
autoHeight:true,
//multiSelect: true,
emptyText: 'No images to display'
})
})
).show();
}
});
这个网页西部的显示:
var westCpt = new Ext.Panel( {
region :'west',
id :'west-panel',
el :'west',
split :true,
width :225,
minSize :160,
maxSize :260,
margins :'0 0 0 0',
title :'快速导航',
collapsible :true,
layout :'accordion',
layoutConfig : {
animate :true
},
items : [ {
title :'菜单',
border :false,
iconCls :'nav',
items: homeTree //加载上面的那棵树
}, {
title :'设置',
border :false,
iconCls :'navigation'
} ]
});
这个tabs是中间首次显示的tab,在上面引用的
var tabs = new Ext.TabPanel({
region:'center',
deferredRender:true,
activeTab:0,
autoScroll :true,
enableTabScroll:true,
listeners:{
remove: function(tp, c){
c.hide();
}
},
autoDestroy: false,
items:[welcomePanel]//这个items大家随意发挥
});
分享到:
相关推荐
extjs实现动态树加载菜单
主要的四个文件 博文链接:https://zhao103804.iteye.com/blog/1884445
后台直接拼接json树形结构 Action直接传到前台
漂亮的Extjs图片展示组件实例,类似于幻灯片,可直接拿去用,非常不错的哦
extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json...
使用ExtJs构建树形菜单功能,很实用的东西。
extjs目录树编辑对目录增删改查学习extjs的工具类
ExtJs菜单导航 可以不用左边的树功能导航,而在一个工具条上放一系列的菜单功能项
extjs下拉树
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
PS:之后的功能设计中,会发现很多的功能都是重复出现的,就可以考虑建立视图时通过继承的方式来实现,而不需要过多的重复。
extjs 树形下拉列表框,可以进行数据选择,数据回显。
extjs动态树struts请求数据json数据格式
EXTJS 点击按钮弹出窗体 可根据实际需求更改
extjs实现动态树
引用ExtJS5.0 实现一个树形菜单的后台管理demo
extjs增删改查分页树
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.