ExtJS--创建可收展的侧边导航栏

最新推荐文章于 2018-11-07 15:23:24 发布

iteye_11240

最新推荐文章于 2018-11-07 15:23:24 发布

阅读量386

点赞数

分类专栏： ExtJS 文章标签： EXT JavaScript json HTML Blog ViewUI

本文链接：https://blog.csdn.net/iteye_11240/article/details/81804010

版权

ExtJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

近几天一直在想怎样把[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文件内容


    <!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]

iteye_11240

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS--创建可收展的侧边导航栏

近几天一直在想怎样把[url="http://3ccoder.iteye.com/blog/556668"]树形菜单[/url]弄成可收放的侧边栏，搞了好几天都没有出来侧边的效果，今天终于出来了，原来是没有用Viewport显示 Ext API中对Viewport的描述如下 "A specialized container representing the viewab...
复制链接

扫一扫