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

yadsun

浏览: 181356 次
性别:
来自: 上海

最近访客更多访客>>

jackuhan

ly23941083

xiangkun

stjauns

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

EXT JavaScript json HTML Blog

    近几天一直在想怎样把树形菜单弄成可收放的侧边栏，搞了好几天都没有出来侧边的效果，今天终于出来了，原来是没有用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(); 
      }
    );

导航栏展开

菜单树全展开

导航栏收起

6
顶

0
踩

分享到：

Ext与服务端通信的方法 | Oracle树结构查询(connect by ...)

2009-12-30 18:16
浏览 8882
评论(2)
分类:Web前端
查看更多

2 楼 yadsun 2010-01-06

neeke 写道

不一定需要viewport吧，貌似只要容器是border布局就可以。

我试了一下用Ext.Panel，它跟Ext.Viewport一样是继承自Container，结果不行。我想可能是因为The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing.(注意红色部分),所以需要调用panel的render()方法,我是这样调的 panel.render(Ext.getBody());可是这样的话必需要对panel手动setHeight();否则就只看到一条边缩在顶部,不知道这有没有方法设置...

var panel = new Ext.Panel({// 用来展示页面的容器
		layout : 'border',
		items : [fpl, mainPanel]
			// 将FuncPanel和FuncBody放入其中显示
	});
	panel .setHeight(400);
	panel .render(Ext.getBody());
	panel .doLayout();

1 楼 neeke 2010-01-06

不一定需要viewport吧，貌似只要容器是border布局就可以。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论