近几天一直在想怎样把[url="http://3ccoder.iteye.com/blog/556668"]树形菜单[/url]弄成可收放的侧边栏,搞了好几天都没有出来侧边的效果,今天终于出来了,原来是没有用Viewport显示
Ext API中对Viewport的描述如下
"A specialized container representing the viewable application area (the browser viewport).
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Inner layouts are available by virtue of the fact that all Panels added to the Viewport, either through its items, or through the items, or the add method of any of its child Panels may themselves have a layout.
The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config."
treepanel.html文件内容
functreepanel.js文件内容
导航栏展开
[img]http://dl.iteye.com/upload/picture/pic/51936/454dea2b-d1b6-34c5-b5a3-33c474859627.gif[/img]
菜单树全展开
[img]http://3ccoder.iteye.com/upload/picture/pic/51934/635c4fe3-3812-34df-ac39-2e2dfc4af7b7.gif[/img]
导航栏收起
[img]http://3ccoder.iteye.com/upload/picture/pic/51932/517a2885-64cf-3d9b-b6de-881e6129c63c.gif[/img]
[img]http://img.tongji.linezing.com/729225/tongji.gif[/img]
Ext API中对Viewport的描述如下
"A specialized container representing the viewable application area (the browser viewport).
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Inner layouts are available by virtue of the fact that all Panels added to the Viewport, either through its items, or through the items, or the add method of any of its child Panels may themselves have a layout.
The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config."
treepanel.html文件内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../css/menu.css" />
<!--<link rel="stylesheet" type="text/css" href="../extjs/docs/resources/docs.css" />-->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="../js/functreepanel.js"></script>
<title>Function TreePanel</title>
</head>
<body>
</body>
</html>
functreepanel.js文件内容
FuncPanel = function(){
FuncPanel.superclass.constructor.call(this,{
id: 'func-tree',
// renderTo: 'funcs',//此处不应有,否则会使设置的布局无效
region: 'west',//在整个布局中的位置
useArrows: true,
lines: false,
width: 200,
margins:'0 5 5 0',//top,right,bottom,left填充
autoScroll: true,
split: true,
collapseMode: 'mini',//收展按钮的样式
rootVisible: false,
root: {
text: 'ROOT',
nodeType: 'async'
},
dataUrl: '../js/nodes.json'//树节点的数据源
}/*param config*/);
};
Ext.extend(FuncPanel,Ext.tree.TreePanel,{
initComponent: function(){
Ext.apply(this, {
tbar: ['->',{
iconCls: 'icon-expand-all',//自定图标义样式
text: 'Expand',
handler: function(){ this.root.expand(true); },
scope: this
}, '-', {
iconCls: 'icon-collapse-all',//自定图标义样式
text: 'Collapse',
handler: function(){ this.root.collapse(true); },
scope: this
}]
});
FuncPanel.superclass.initComponent.call(this);
}
});
BodyPanel = function(){
BodyPanel.superclass.constructor.call(this,{
id: 'func-body',
region: 'center',
margins:'0 5 5 0',
// renderTo: 'func-body',
html: 'This is body area ... ...
',
autoScroll: true
}/*param config*/);
};
Ext.extend(BodyPanel,Ext.Panel,{
initComponent: function(){
Ext.apply(this,{
tbar: ['->',{
text: 'Refresh',
iconCls: 'icon-refresh'//自定图标义样式
}
]
})
BodyPanel.superclass.initComponent.call(this);
}
});
Ext.onReady(function(){
var fpl = new FuncPanel();//左侧panel
var mainPanel = new BodyPanel();//中间panel
var viewport = new Ext.Viewport({//用来展示页面的容器
layout:'border',
items:[fpl, mainPanel]//将FuncPanel和FuncBody放入其中显示
});
viewport.doLayout();
}
);
导航栏展开
[img]http://dl.iteye.com/upload/picture/pic/51936/454dea2b-d1b6-34c5-b5a3-33c474859627.gif[/img]
菜单树全展开
[img]http://3ccoder.iteye.com/upload/picture/pic/51934/635c4fe3-3812-34df-ac39-2e2dfc4af7b7.gif[/img]
导航栏收起
[img]http://3ccoder.iteye.com/upload/picture/pic/51932/517a2885-64cf-3d9b-b6de-881e6129c63c.gif[/img]
[img]http://img.tongji.linezing.com/729225/tongji.gif[/img]