📄 ext.layout.accordion.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.layout.Accordion-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.layout.Accordion-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.layout.Accordion-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.layout.Accordion-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.layout.Accordion"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class Ext.layout.Accordion</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"> AccordionLayout.js </td> </tr> <tr> <td class="label"> Class: </td> <td class="hd-info"> Ext.layout.Accordion </td> </tr> <tr> <td class="label"> Extends: </td> <td class="hd-info"> Ext.layout.FitLayout </td> </tr> </table> <div class="description"> <p>此layout包含了多个像卡片垂直方向堆栈的面板。在某一时间，只有一个卡片（面板）是可见的。
每个面板都支持内建的展开和闭合功能。
应通过继承此类或设置<a href="###" onClick="alert('Ext.Container#layout');">Ext.Container#layout</a>的配置layout:'accordion' 的方式创建，一般很少通过关键字new直接使用。</p>
<p>注意必须通过<a href="###" onClick="alert('Ext.Container#layoutConfig');">Ext.Container#layoutConfig</a>属性对象来指定属于此布局的配置，以便传入到layout的内部。
用法举例：</p>
<pre><code>
var accordion = new Ext.Panel({
title: 'Accordion Layout',
layout:'accordion',
defaults: {
// 作用每个面板上
bodyStyle: 'padding:15px'
},
layoutConfig: {
// layout特定的配置
titleCollapse: false,
animate: true,
activeOnTop: true
}
items: [{
title: 'Panel 1',
html: '<p>Panel content!</p>'
},{
title: 'Panel 2',
html: '<p>Panel content!</p>'
},{
title: 'Panel 3',
html: '<p>Panel content!</p>'
}]
});
</code></pre>
</div> <div class="hr"> </div> <a id="Ext.layout.Accordion-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="fill-header"></a> <b>fill</b> : Boolean <div class="mdesc"> <div class="short"> True表示为调整活动的面板以填充整个容器的空白空间，false表示使... </div> <div class="long"> True表示为调整活动的面板以填充整个容器的空白空间，false表示使用当前的高度，或不声明即表示自动高度（缺省为true）。
</div> </div> </td> <td class="msource"> Accordion </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="autoWidth-header"></a> <b>autoWidth</b> : Boolean <div class="mdesc"> <div class="short"> True表示为设置每个容器的宽度为‘auto’，false表示用子项当... </div> <div class="long"> True表示为设置每个容器的宽度为‘auto’，false表示用子项当前的宽度（缺省为true）。
</div> </div> </td> <td class="msource"> Accordion </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="titleCollapse-header"></a> <b>titleCollapse</b> : Boolean <div class="mdesc"> <div class="short"> True表示为单击标题栏上任意的位置就允许展开、闭合每个子面板，
f... </div> <div class="long"> True表示为单击标题栏上任意的位置就允许展开、闭合每个子面板，
false表示为只能从工具条上轮换的按钮来展开、闭合面板（缺省为true）。
当设置为fasle,<a href="###" onClick="alert('#hideCollapseTool');">#hideCollapseTool</a>也必须为fasle。
</div> </div> </td> <td class="msource"> Accordion </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="hideCollapseTool-header"></a> <b>hideCollapseTool</b> : Boolean <div class="mdesc"> <div class="short"> True表示为隐藏包含面板上闭合、展开轮换按钮，false表示为显示（... </div> <div class="long"> True表示为隐藏包含面板上闭合、展开轮换按钮，false表示为显示（默认为true），
当设置为true,{@link #hideCollapseTool}也必须为true。
</div> </div> </td> <td class="msource"> Accordion </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="collapseFirst-header"></a> <b>collapseFirst</b> : Boolean <div class="mdesc"> <div class="short"> True表示为确保展开闭合的轮换按钮总是排在第一个的位置渲染（从左算起... </div> <div class="long"> True表示为确保展开闭合的轮换按钮总是排在第一个的位置渲染（从左算起），
false表示为放在最后显示（默认为fasle）。
</div>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -