[转]Ext2.0中 ViewPort 详解！!

[softfire007]

在使用ext的时候，好多组件需要指定renderTo属性才会被渲染到页面上

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

看下面的代码：


[复制到剪贴板]CODE:
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[{title:"唯一的面板",
html:"",
bbar:[{text:" 添加 "},
{text:" 删除 "}]
}]
});


运行结果：（图）

v1.jpg (28.26 K)

2008/8/4 11:23:31


2.ViewPort主要用于应用程序的主界面，可以通过不同的布局来搭建出不同风格的应用程序主界面

看下面的代码：


[复制到剪贴板]CODE:
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"}]
}
]
});
});


运行结果：
v2.jpg (32.80 K)

转自：http://www.17ext.com/showtopic-213.aspx

[bakyo]

学习