Ext Viewport实现页面布局-优快云博客

本文链接：https://blog.youkuaiyun.com/boboo_2000_0/article/details/5113843

本文介绍了一个使用ExtJS框架实现的页面布局案例，包括Viewport布局的应用、TabPanel的配置以及TreePanel的集成。案例展示了如何通过ExtJS创建响应式的用户界面，并通过具体的代码实现了菜单导航和内容切换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是使用Ext JS中的布局对象Viewport实现的页面整体布局实例:(看看这里)

<html><head><title>ExtSystem</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"><style type="text/css">.settings {background-image:url(images/fam/folder_wrench.png);}.nav {background-image:url(images/fam/folder_go.png);}.user {background-image:url(images/fam/user.png);}.user_edit {background-image:url(images/fam/user_edit.png);}.refresh {background-image:url(images/Refresh.gif) !important;}</style><script type="text/javascript" src="adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.QuickTips.init();var toolBar = new Ext.Toolbar({//renderTo:"ToolBar",autoheight:true,autoWidth:true,items:[{text:"刷新",tooltip:"刷新该选项卡",iconCls:"refresh"}]});var MenuBlock = function(config){ config = config || {}; var items = config.items; if(items) { var root = new Ext.tree.TreeNode(); for(var i=0;i<items.length;i++) { root.appendChild(new Ext.tree.TreeNode(Ext.apply({ listeners: { 'click': function(target, evt){ evt.stopEvent();var itemCount = contentTabs.items.length;var itemTitle = '';var isExist = false;for(var j=0;j<itemCount;j++){tabTitle = contentTabs.get(j).title;if(tabTitle==target.text){isExist = true;}}if(!isExist){contentTabs.add({title: target.text,autoLoad:{url:target.id,scripts:true},closable:true}).show();} } } }, items[i]))); } config.items = [new Ext.tree.TreePanel({ autoScroll : true, animate : true, border : false, rootVisible : false, root : root })]; } MenuBlock.superclass.constructor.call(this, config); } Ext.extend(MenuBlock, Ext.Panel);var contentTabs = new Ext.TabPanel({activeTab: 0,height:600,border: true,deferredRender: false,tabPosition: 'top',items: [{title:"订单信息",closable: true, autoScroll: true,iconCls:"user_edit",autoLoad:{url:"http://localhost/aspTest/shop.asp",scripts:true}}]});new Ext.Viewport({layout: 'border',margins:'5 0 5 5',items: [ {region: 'west',collapsible: true,split: true,width: 200, minSize: 175,maxSize: 400,title: '系统菜单',layout: {type: 'accordion',animate: true},items:[new MenuBlock({title: "客户管理",iconCls: "user",items: [{text: "会员管理", id: "http://www.baidu.com"},{text: "非会员管理", id: 'DataGridPage.html'}]}),new MenuBlock({title: "订单管理",items: [{text: '订单信息', id: 'node1.html'},{text: '订单日志', id: 'node2.html'}]})]},{region: 'center',title: '系统数据显示',tbar:[toolBar],//xtype: 'tabpanel',items: [contentTabs]}]});});</script></head><body> <div id="Container"> <div id="ToolBar"></div> <div id="Content"></div> <div id="StatuBar"></div> </div></body></html>