Extjs 菜单树、如何单击树弹出tab、如何用DataView显示图片

效果图片：



树菜单的建立，这里将动态树的产生：

声明：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大家随意发挥

});