ext2.0中组件（viewPort）的使用（4）

iteye_10018

于 2013-10-25 14:45:00 发布

阅读量144

点赞数

本文介绍了ExtJS中Viewport的应用实例，展示了如何创建Viewport组件并配置不同布局方式，包括fit布局和border布局。通过具体代码示例，演示了如何设置面板、按钮等元素，并实现界面的动态调整。

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

1.VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。

Ext.onReady(function(){
	new Ext.Viewport({
		enableTabScroll:true,
		layout:"fit",
		items:[{title:"面板",
		html:"的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶",
		bbar:[{text:"按钮1"},
		{text:"按钮2"}]
		}]
	});
});

Ext.onReady(function(){
	new Ext.Viewport({
		enableTabScroll:true,
		layout:"border",
		items:[{title:"面板",
		region:"north",
		height:50,
		html:"<h1>网站后台管理系统!</h1>"
		},
		{title:"菜单",
		region:"west",
		width:200,
		collapsible:true,
		html:"菜单栏"
		},
		{
		xtype:"tabpanel",
		region:"center",
		items:[{title:"面板1"},
		{title:"面板2"}]
		}
		]
	});
});