Ext.layout.Accordion扩展自Ext.layout.FitLayout布局,其xtype值为accordion。
主要配置项:
activeOnTop:是否保持展开的子面板处于父面板的顶端,默认为false。
animate:是否在展开或收缩子面板时使用滑动方式,默认为false。
fill:设置子面板是否自动调整高度充满父面板的剩余空间,默认为true。
titleCollapse:设置是否允许通过单击子面板的标题来展开或收缩面板,默认为true。
hideCollapseTool:是否隐藏子面板的“展开收缩”按钮,默认为false。
new Ext.Panel({
renderTo: "div2",
frame: true,
layout: "accordion",
layoutConfig: {
animate: true
},
title: "折叠布局(AccordionLayout)",
height: 300,
defaults: {
bodyStyle: "padding:3px; background-color: #FFFFFF"
},
items: [
{title:"嵌套面板一", html:"嵌套面板一"},
{title:"嵌套面板二", html:"嵌套面板二"},
{title:"嵌套面板三", html:"嵌套面板三"}
]
});


- 大小: 18.4 KB
分享到:
相关推荐
在ExtJS中,折叠布局(Accordion Layout)是一种特殊的布局方式,它将所有子组件(Panels)垂直堆叠,并且在任何时刻只允许一个面板展开显示其内容,其他面板则保持折叠状态。`layout: 'accordion'` 就是用来设置...
在Sencha Touch中,`Accordion`布局是一种特殊的布局方式,主要用于展示一系列可折叠的面板,每个面板只显示一个内容区域,用户点击一个面板时,其他面板会自动收起。这种布局方式常用于信息展示、菜单导航等场景,...
在Android应用开发中,"手风琴滑动布局"(Accordion Swipe Layout)是一种常见的用户界面设计,它允许用户展开和折叠视图,以显示或隐藏更详细的信息。这种布局模式通常用于列表或卡片视图中,以提高用户体验,特别...
Accordion布局,又称为折叠面板布局,允许在一个容器内放置多个面板,这些面板会像手风琴一样展开和折叠。这种布局模式在展示大量分类信息时特别有用,因为它节省了空间并提供了良好的可交互性。每个面板在打开时会...
Accordion布局允许子组件折叠和展开,只显示一个展开的子组件。通过`layout: 'accordion'`启用,可以设置`layoutConfig.animate`为`true`实现动画效果,增加交互性。 6. Card布局: Card布局类似于翻页或步骤向导...
在页面的body部分,使用了EasyUI的布局组件layout,这可以让我们快速定义页面布局的各个区域,比如头部(north)、菜单(west)、中心区域(center)、东部区域(east)和底部(south)。在菜单区域中,我们设置了...
Accordion 布局由类Ext.layout.Accordion 定义,名称为accordion,表示可折叠的布局,也就 是说使用该布局的容器组件中的子元素是可折叠的形式。
5. **Accordion布局**:每个子组件可以折叠和展开,只显示一个展开的项。通过`layout: "accordion"`启用,`layoutConfig`中的`animate`属性可以控制展开动画的启用,如`{animate: true}`。 6. **Card布局**:同一...
4. `collapsible`属性控制是否可以折叠Panel,但在accordion布局中,这个属性是不必要的,因为所有子Panel都默认可以折叠。 5. 通过调整`width`、`height`等属性,可以定制Panel的尺寸,以适应不同屏幕大小和需求。 ...
4. **手风琴下拉布局** (AccordionLayout):手风琴布局允许子组件共享垂直空间,只有一个组件在任何时候可见。这种布局适合展示多个内容区,但一次只能显示一个。通过 `...
`AccordionLayout`用于折叠面板布局,而`CardLayout`则用于在一个区域内展示一组卡片,每次只显示一张。设置Fit布局非常简单,只需要在容器上设置`layout:'fit'`,然后添加一个面板即可。例如: ```javascript Ext....
Accordion布局,也称为手风琴布局,使得容器内的子元素可以折叠和展开,一次只显示一个。在这种布局下,所有子组件的高度都是动态调整的,当一个子组件被展开时,其他子组件会被自动折叠。例如,上述代码创建了一个...
2. AccordionLayout(手风琴布局) 手风琴布局是指组件可以根据需要展开或折叠,类似于手风琴的原理,常用于创建可以动态展开或收缩的侧边栏。在这种布局中,Panel可以被设置为默认展开或折叠,而且可以配置是否在...
手风琴布局允许你创建一系列可折叠的面板,一次只能打开其中一个面板。这种布局非常适合于创建导航菜单或选项卡式的界面。 **示例代码**: ```javascript Ext.onReady(function () { accordionlayout(); }); ...
- **折叠布局(AnchorLayout)**:通过`layout: "anchor"`指定,允许根据组件的锚点属性(如`anchor`)在容器内精确定位组件。 - **边框布局(BorderLayout)**:使用`layout: "border"`,将容器分为东、南、西、...
3. **AccordionLayout**:折叠布局,也基于FitLayout,允许每个子组件像手风琴一样展开和折叠。在这个布局中,同一时间只能有一个面板展开。 4. **CardLayout**:卡片布局,一次只显示一个子组件,就像一副扑克牌,...
- **定义**:Accordion布局由类`Ext.layout.AccordionLayout`定义,布局名称为`accordion`,允许子元素以可折叠的形式显示。 - **特性**: - 支持展开/收起效果。 - 可以通过配置项控制折叠面板的动画效果。 **...
手风琴布局使得容器内的子元素可以折叠和展开,每次只有一个子元素是可见的。在这种布局中,点击一个面板的标题,该面板会打开,同时其他已打开的面板会关闭。如示例代码所示,`layout: 'accordion'`用于创建这种...
Accordion布局是ExtJS中的一种特殊布局方式,它允许在一个容器内展示多个可折叠的面板,每个面板的展开会自动收起其他已展开的面板,从而提供了一种高效的屏幕空间利用机制。 一、Accordion布局的核心概念 ...