📄 ext.viewport.html
字号:
<!--Mock<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" /><link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/><link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>--><style type="text/css"> body { overflow: scroll; } /** .mdesc .long { display: block; } */</style><!-- End Mock--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><div class="body-wrap"> <div class="top-tools"> <a class="inner-link" href="#Ext.Viewport-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.Viewport-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.Viewport-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.Viewport-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.Viewport"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class Ext.Viewport</h1> <table cellspacing="0"> <!-- <tr> <td class="label"> Package: </td> <td class="hd-info"> </td> </tr> --> <tr> <td class="label"> Defined In: </td> <td class="hd-info"> Viewport.js </td> </tr> <tr> <td class="label"> Class: </td> <td class="hd-info"> Ext.Viewport </td> </tr> <tr> <td class="label"> Extends: </td> <td class="hd-info"> Ext.Container </td> </tr> </table> <div class="description"> <p> 一个表示程序可视区域的特殊容器（浏览器可视区域） 。
<p> 视窗渲染在document的body标签上，并且根据浏览器可视区域的大小自动调整并且管理窗口的大小变化。一个页面上只允许存在一个viewport。
所有的 {@link Ext.Panel 面板}增加到viewport，通过她的 <a href="###" onClick="alert('#items');">#items</a>，或者通过她的子面板（子面板也都可以拥有自己的layout）的items，子面板的<a href="###" onClick="alert('#add');">#add</a>方法，这种设计让内部布局的优势非常明显。
</p>
<p>Viewport 不支持滚动，所以如果子面板需要滚动支持可以使用<a href="###" onClick="alert('#autoScroll');">#autoScroll</a>配置。</p>
展示一个经典的border布局的viewport程序示例 :<pre><code>
new Ext.Viewport({
layout: 'border',
defaults: {
activeItem: 0,
},
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
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
}]
});
</code></pre </div> <div class="hr"> </div> <a id="Ext.Viewport-configs"></a> <h2>配置项</h2> <table cellspacing="0" class="member-table"> <tr> <th class="sig-header" colspan="2"> 配置项 </th> <th class="msource-header"> 定义者 </th> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="monitorResize-header"></a> <b>monitorResize</b> : Boolean <div class="mdesc"> <div class="short"> Ture表示为自动监视window resize的事件，以处理接下来一... </div> <div class="long"> Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由<a href="###" onClick="alert('#layout');">#layout</a>调控，而无须手动设置。 </div> </div> </td> <td class="msource"> <!--如果这不是同个namespace下--> <a ext:cls="Ext.Container" ext:member="#method-monitorResize" href="output/Ext.Container.html#method-monitorResize"> Container </a> </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="layout-header"></a> <b>layout</b> : String <div class="mdesc"> <div class="short"> 此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C... </div> <div class="long"> 此容器所使用的布局类型。如不指定，则使用缺省的<a href="###" onClick="alert('Ext.layout.ContainerLayout');">Ext.layout.ContainerLayout</a>类型。 当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。 针对所选择布局类型，可指定<a href="###" onClick="alert('#layoutConfig');">#layoutConfig</a>进一步配置。 </div> </div> </td> <td class="msource"> <!--如果这不是同个namespace下--> <a ext:cls="Ext.Container" ext:member="#method-layout" href="output/Ext.Container.html#method-layout"> Container </a> </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="layoutConfig-header"></a> <b>layoutConfig</b> : Object <div class="mdesc"> <div class="short"> 选定好layout布局后，其相应的配置属性就在这个对象上进行设置。 (... </div> <div class="long"> 选定好layout布局后，其相应的配置属性就在这个对象上进行设置。 (即与<a href="###" onClick="alert('#layout');">#layout</a>配置联合使用)有关不同类型布局有效的完整配置信息，参阅对应的布局类： <ul class="mdetail-params"> <li><a href="###" onClick="alert('Ext.layout.Accordion');">Ext.layout.Accordion</a></li> <li><a href="###" onClick="alert('Ext.layout.AnchorLayout');">Ext.layout.AnchorLayout</a></li> <li><a href="###" onClick="alert('Ext.layout.BorderLayout');">Ext.layout.BorderLayout</a></li> <li><a href="###" onClick="alert('Ext.layout.CardLayout');">Ext.layout.CardLayout</a></li> <li><a href="###" onClick="alert('Ext.layout.ColumnLayout');">Ext.layout.ColumnLayout</a></li> <li><a href="###" onClick="alert('Ext.layout.FitLayout');">Ext.layout.FitLayout</a></li> <li><a href="###" onClick="alert('Ext.layout.FormLayout');">Ext.layout.FormLayout</a></li> <li><a href="###" onClick="alert('Ext.layout.TableLayout');">Ext.layout.TableLayout</a></li></ul> </div> </div> </td> <td class="msource"> <!--如果这不是同个namespace下--> <a ext:cls="Ext.Container" ext:member="#method-layoutConfig" href="output/Ext.Container.html#method-layoutConfig"> Container </a> </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="bufferResize-header"></a> <b>bufferResize</b> : Boolean/Number <div class="mdesc"> <div class="short"> When set to true (100 milliseconds)... </div> <div class="long"> When set to true (100 milliseconds) or a number of milliseconds, 当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。 如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。 </div> </div> </td> <td class="msource"> <!--如果这不是同个namespace下--> <a ext:cls="Ext.Container" ext:member="#method-bufferResize" href="output/Ext.Container.html#method-bufferResize"> Container </a> </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="activeItem-header"></a> <b>activeItem</b> : String/Number <div class="mdesc"> <div class="short"> 组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例... </div> <div class="long"> 组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如<a href="###" onClick="alert('Ext.layout.Accordion');">Ext.layout.Accordion</a>、<a href="###" onClick="alert('Ext.layout.CardLayout');">Ext.layout.CardLayout</a>和 <a href="###" onClick="alert('Ext.layout.FitLayout');">Ext.layout.FitLayout</a>），以在某个时刻中显示一项内容。相关内容请参阅<a href="###" onClick="alert('Ext.layout.ContainerLayout#activeItem');">Ext.layout.ContainerLayout#activeItem</a>。 </div> </div> </td> <td class="msource"> <!--如果这不是同个namespace下--> <a ext:cls="Ext.Container" ext:member="#method-activeItem" href="output/Ext.Container.html#method-activeItem">⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -