PropertiesMethodsEventsConfig OptionsDirect Link

Class Ext.Viewport

Defined In: Viewport.js
Class: Ext.Viewport
Extends: Ext.Container

一个表示程序可视区域的特殊容器(浏览器可视区域) 。

视窗渲染在document的body标签上,并且根据浏览器可视区域的大小自动调整并且管理窗口的大小变化。一个页面上只允许存在一个viewport。 所有的 {@link Ext.Panel 面板}增加到viewport,通过她的 #items,或者通过她的子面板(子面板也都可以拥有自己的layout)的items,子面板的#add方法,这种设计让内部布局的优势非常明显。

Viewport 不支持滚动,所以如果子面板需要滚动支持可以使用#autoScroll配置。

展示一个经典的border布局的viewport程序示例 :

new Ext.Viewport({
    layout: 'border',
    defaults: {
        activeItem: 0,
    },
    items: [{
        region: 'north',
        html: '

Page Title

', autoHeight: true, border: false, margins: '0 0 5 0' }, { region: 'west', collapsible: true, title: 'Navigation', xtype: 'treepanel', width: 200, autoScroll: true, split: true, loader: new Ext.tree.TreeLoader(), root: new Ext.tree.AsyncTreeNode({ expanded: true, children: [{ text: 'Menu Option 1', leaf: true }, { text: 'Menu Option 2', leaf: true }, { text: 'Menu Option 3', leaf: true }] }), rootVisible: false, listeners: { click: function(n) { Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"'); } } }, { region: 'center', xtype: 'tabpanel', items: { title: 'Default Tab', html: 'The first tab\'s content. Others may be added dynamically' } }, { region: 'south', title: 'Information', collapsible: true, html: 'Information goes here', split: true, height: 100, minHeight: 100 }] });

配置项

配置项 定义者

公告属性

属性 定义者

公共方法

方法 定义者

公告事件

事件 定义者