`
QIAN_QIAN
  • 浏览: 139641 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

EXT中的可折叠布局

 
阅读更多

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

 

EXT源码:

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

width:500,

height:200,

layout:"accordion",

layoutConfig: {

animate: true 

},

items:[{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"},

{title:"子元素3",html:"这是子元素3中的内容"}

]

}

);

});
//在layoutConfig中指定布局配置参数animate为true,表示在执行展开折叠时是否应用动画效果。
分享到:
评论

相关推荐

    Ext常用布局

    在这个例子中,我们创建了一个带有四个边栏和一个中心区域的Border布局,每个区域都有可调整大小的特性。 总结来说,Ext中的Fit布局和Border布局提供了灵活的布局方案,可以满足不同类型的UI设计需求。Fit布局适合...

    extjs 折叠布局

    ext js简单的折叠布局 自己总结的 根据项目的需要可以使用

    Ext介绍以及_ext页面布局

    适用于展示一系列可折叠的内容。 2. **Column布局**:Column布局允许你在同一列中按比例或固定宽度分配子元素。通过`columnWidth`(百分比)或`width`(像素)属性来定义每个元素的宽度。 3. **Card布局**:Card...

    Ext.Viewport布局

    - **`west`区域:** 宽度设定为210像素,可折叠,采用`accordion`布局,意味着其中的各个面板将堆叠显示,只显示当前选中面板的内容。 - **`center`区域:** 包含`Ext.TabPanel`,用于展示一系列可切换的标签页。通过`...

    Ext10种布局

    - **特点**:允许容器中的子元素以可折叠的形式展示。 - **使用技巧**:默认情况下,使用 `ExtAccordion` 布局时会自动展开第一个子元素。若不希望自动展开,可在 `items` 配置中为每个子元素设置 `collapsed: true`...

    GWT-ext 布局示例

    在本文中,我们将深入探讨GWT-Ext框架中布局管理器的应用,这是一个基于Google Web Toolkit (GWT) 和 ExtJS 的强大控件库,用于快速开发富互联网应用程序。本系列文章的第三部分主要关注各种布局的实现和使用技巧,...

    EXT制作的布局,使用border layout, 稍做改动即可添加到自己的项目里, 简单实用。让你感受EXT的强大

    在EXT中,布局(Layout)是一种核心特性,它负责管理组件(Components)在容器(Container)中的排列和尺寸调整。本示例主要讲解了EXT如何利用Border Layout实现一个简单而实用的布局设计。 Border Layout是EXT中的...

    搜集来的ext布局材料

    - `collapsible` 属性决定面板是否可折叠。 - `width` 和 `height` 属性用于设置组件的尺寸。 通过这些布局和配置,EXTJS开发者能够灵活地构建出丰富多样的用户界面,适应各种业务需求。理解并熟练掌握这些布局...

    ext 3.0 中文API

    1. **Panel**:这是EXT中最基础的组件,可以用来构建整个应用的基础结构。它包含标题、工具栏、边框和可折叠等功能。 2. **Grid**:EXT的网格组件是其一大特色,用于显示和操作表格数据。它可以进行分页、排序、...

    EXT 中文帮助手册

    在EXT 中,"手风琴"是一个常见的布局方式,它允许用户在一个有限的空间内展示多个扩展面板(EXT panels),每次只有一个面板可见。手风琴布局通常用于显示大量分类信息,用户可以轻松地展开或折叠面板以查看具体内容...

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

    以下是对EXT布局中几种常见布局方式的详细说明: 1. Column布局: Column布局将容器分割成多列,每列的宽度可以通过`columnWidth`指定为百分比,或者通过`width`指定为像素值。例如,如果你想创建三列等宽的布局,...

    Ext3.0 + 中文API

    4. **布局管理**:Ext3.0提供了多种布局方式,如表格布局、流式布局、绝对布局等,可以满足不同场景下的布局需求,使开发者能够轻松控制组件的排列和大小。 5. **表格和数据网格**:Ext3.0的表格功能强大,支持多列...

    EXT中文手册8

    `Window` 组件是EXT框架中用于创建可浮动窗口的关键部分。这种窗口具有类似桌面应用程序的特性,如最小化、最大化、还原、拖动等,使得基于Web的应用程序能够拥有接近桌面软件的用户体验。`Window` 的强大之处在于它...

    EXT中文手册5.pdf

    - **North** 和 **South** 区域支持可折叠(collapsible)特性,即用户可以通过点击来隐藏和显示这些区域。 - **East** 和 **West** 区域也支持分隔条(split)和初始大小(initialSize)等配置项,使得这些区域能够...

    ext框架框架框架框架框架

    通过`border`布局管理器组织页面结构,使用面板组件创建可折叠的区域,并通过盒模型组件添加静态内容。此外,还通过事件监听实现了动态的用户交互功能。这种布局方式非常适合于需要分区域展示内容的大型企业级应用,...

    Ext grid与树实例

    Tree组件是一个可折叠的层级结构,常用于展现具有层次关系的数据,比如文件系统、组织结构或者导航菜单。与Grid不同,Tree的每个节点都可以有子节点,可以展开或折叠。在Ext Tree中,你可以定义节点模型(model)、...

    Ext 3.0 中文文档.zip

    Ext 3.0的Tree支持拖放操作、节点展开/折叠以及异步加载。通过配置,开发者可以定制节点的图标、文本和行为,也可以添加右键菜单和搜索功能。 这份"Ext 3.0中文文档.CHM"包含了上述所有主题的详细解释和示例代码,...

    ext培训文档doc

    3. **布局管理**:EXT提供多种布局模式,如Fit布局、Border布局、Form布局等,可以根据需要灵活调整组件的大小和位置,适应不同屏幕尺寸和设备。 4. **Ajax和数据存储**:EXT内置了Ajax通信机制,可以方便地与...

    EXT_中文手册 +Ext2.2API中文版(最终完成版).CHM

    7. **树形(Tree)**:EXT的树形组件支持层级结构的数据展示,可进行展开、折叠、拖放等操作,常用于组织结构的展示。 8. **图表(Charts)**:EXT2.2引入了图表组件,支持多种图表类型,如柱状图、折线图、饼图等...

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

    以下将详细介绍EXT布局中的几种主要类型及其应用场景。 1. **Column布局**:此布局将容器划分为多列,每列的宽度可以通过`columnWidth`指定为百分比值。例如,设置`layout: "column"`后,可以分配列的相对宽度,...

Global site tag (gtag.js) - Google Analytics