`
raymond.chen
  • 浏览: 1454344 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

折叠布局(AccordionLayout)

阅读更多

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折叠布局中添加树

    在ExtJS中,折叠布局(Accordion Layout)是一种特殊的布局方式,它将所有子组件(Panels)垂直堆叠,并且在任何时刻只允许一个面板展开显示其内容,其他面板则保持折叠状态。`layout: 'accordion'` 就是用来设置...

    sencha touch accordion(折叠) 布局

    在Sencha Touch中,`Accordion`布局是一种特殊的布局方式,主要用于展示一系列可折叠的面板,每个面板只显示一个内容区域,用户点击一个面板时,其他面板会自动收起。这种布局方式常用于信息展示、菜单导航等场景,...

    Android-accordion-swipe-layoutAndroid手风琴滑动布局

    在Android应用开发中,"手风琴滑动布局"(Accordion Swipe Layout)是一种常见的用户界面设计,它允许用户展开和折叠视图,以显示或隐藏更详细的信息。这种布局模式通常用于列表或卡片视图中,以提高用户体验,特别...

    ExtjS--accordion布局

    Accordion布局,又称为折叠面板布局,允许在一个容器内放置多个面板,这些面板会像手风琴一样展开和折叠。这种布局模式在展示大量分类信息时特别有用,因为它节省了空间并提供了良好的可交互性。每个面板在打开时会...

    ext布局(Layout.html)例子.pdf

    Accordion布局允许子组件折叠和展开,只显示一个展开的子组件。通过`layout: 'accordion'`启用,可以设置`layoutConfig.animate`为`true`实现动画效果,增加交互性。 6. Card布局: Card布局类似于翻页或步骤向导...

    jQuery EasyUI 折叠面板accordion的使用实例(分享)

    在页面的body部分,使用了EasyUI的布局组件layout,这可以让我们快速定义页面布局的各个区域,比如头部(north)、菜单(west)、中心区域(center)、东部区域(east)和底部(south)。在菜单区域中,我们设置了...

    Accordion布局

    Accordion 布局由类Ext.layout.Accordion 定义,名称为accordion,表示可折叠的布局,也就 是说使用该布局的容器组件中的子元素是可折叠的形式。

    ext布局(Layout.html)例子[参考].pdf

    5. **Accordion布局**:每个子组件可以折叠和展开,只显示一个展开的项。通过`layout: "accordion"`启用,`layoutConfig`中的`animate`属性可以控制展开动画的启用,如`{animate: true}`。 6. **Card布局**:同一...

    extjs4中panel的accordion布局以及treepanel导航

    4. `collapsible`属性控制是否可以折叠Panel,但在accordion布局中,这个属性是不必要的,因为所有子Panel都默认可以折叠。 5. 通过调整`width`、`height`等属性,可以定制Panel的尺寸,以适应不同屏幕大小和需求。 ...

    GWT-ext 布局示例

    4. **手风琴下拉布局** (AccordionLayout):手风琴布局允许子组件共享垂直空间,只有一个组件在任何时候可见。这种布局适合展示多个内容区,但一次只能显示一个。通过 `...

    Ext常用布局

    `AccordionLayout`用于折叠面板布局,而`CardLayout`则用于在一个区域内展示一组卡片,每次只显示一张。设置Fit布局非常简单,只需要在容器上设置`layout:'fit'`,然后添加一个面板即可。例如: ```javascript Ext....

    ExtJS layout的9种样式详解

    Accordion布局,也称为手风琴布局,使得容器内的子元素可以折叠和展开,一次只显示一个。在这种布局下,所有子组件的高度都是动态调整的,当一个子组件被展开时,其他子组件会被自动折叠。例如,上述代码创建了一个...

    Extjs学习笔记之七 布局

    2. AccordionLayout(手风琴布局) 手风琴布局是指组件可以根据需要展开或折叠,类似于手风琴的原理,常用于创建可以动态展开或收缩的侧边栏。在这种布局中,Panel可以被设置为默认展开或折叠,而且可以配置是否在...

    extjs布局管理学习指南

    手风琴布局允许你创建一系列可折叠的面板,一次只能打开其中一个面板。这种布局非常适合于创建导航菜单或选项卡式的界面。 **示例代码**: ```javascript Ext.onReady(function () { accordionlayout(); }); ...

    ExtJS之布局详解

    - **折叠布局(AnchorLayout)**:通过`layout: "anchor"`指定,允许根据组件的锚点属性(如`anchor`)在容器内精确定位组件。 - **边框布局(BorderLayout)**:使用`layout: "border"`,将容器分为东、南、西、...

    extjs_页面布局.doc

    3. **AccordionLayout**:折叠布局,也基于FitLayout,允许每个子组件像手风琴一样展开和折叠。在这个布局中,同一时间只能有一个面板展开。 4. **CardLayout**:卡片布局,一次只显示一个子组件,就像一副扑克牌,...

    extjs布局全面讲解

    - **定义**:Accordion布局由类`Ext.layout.AccordionLayout`定义,布局名称为`accordion`,允许子元素以可折叠的形式显示。 - **特性**: - 支持展开/收起效果。 - 可以通过配置项控制折叠面板的动画效果。 **...

    ExtJs的LayOut详解

    手风琴布局使得容器内的子元素可以折叠和展开,每次只有一个子元素是可见的。在这种布局中,点击一个面板的标题,该面板会打开,同时其他已打开的面板会关闭。如示例代码所示,`layout: 'accordion'`用于创建这种...

    学习ExtJS accordion布局

    Accordion布局是ExtJS中的一种特殊布局方式,它允许在一个容器内展示多个可折叠的面板,每个面板的展开会自动收起其他已展开的面板,从而提供了一种高效的屏幕空间利用机制。 一、Accordion布局的核心概念 ...

Global site tag (gtag.js) - Google Analytics