`
weibaojun
  • 浏览: 99284 次
  • 性别: Icon_minigender_1
  • 来自: 火星
社区版块
存档分类
最新评论

Ext Accordion 不展开

    博客分类:
  • Ext
阅读更多

使用Ext Accordion 布局时默认展开第一个元素,当不需要展开第一项时需要给items中的每项指定collapsed:true

代码如下:

var accordion = new Ext.Panel({
		renderTo : Ext.getBody(),
		title: 'Accordion Layout',
		layout:'accordion',
		width:200,
		defaults: {
			// applied to each contained panel
			bodyStyle: 'padding:15px'
		},
		layoutConfig: {
			// layout-specific configs go here
			titleCollapse: true,
			collapseFirst : false,
			animate: true,
			hideCollapseTool : false,
			activeOnTop: false
		},
		items: [{
			title: 'Panel 1',
			id : 'id1',
			collapsed:true, 
			html: '<p>Panel content!</p>'
		},{
			title: 'Panel 2',
			collapsed:true, 
			id : 'id2',
			html: '<p>Panel content!</p>'
		},{
			title: 'Panel 3',
			collapsed:true, 
			id : 'id3',
			html: '<p>Panel content!</p>'
		}]
	});

 

分享到:
评论

相关推荐

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    用户可以通过折叠和展开Accordion面板浏览不同分类,而Ext.tree.Panel则提供了一种直观的方式来展示和操作层级结构的数据。这种技术组合在企业级应用开发中非常常见,能够提供高效、用户友好的界面体验。

    ExtJS 4 复杂 百叶窗(accordion)布局

    ExtJS 4 复杂 百叶窗(accordion)布局

    ExtjS--accordion布局

    在源码层面,ExtJS 的accordion布局依赖于Ext.layout.container.Accordion类。这个类实现了布局逻辑,包括计算每个面板的高度,处理面板的展开和折叠事件等。开发者可以通过阅读源码深入理解其内部工作原理,以便...

    extjs菜鸟做的动态accordion加动态tree

    Accordion组件允许在有限的空间内展开和折叠多个面板,而Tree组件则可以展示层次化的数据,支持动态加载和用户交互。 2. **Struts2**:Struts2是基于MVC模式的Java Web框架,用于处理HTTP请求并转发到相应的控制器...

    ext UI效果模板

    4. 导航和布局:如选项卡面板、 accordion布局、浮动窗口、弹出对话框等,帮助构建层次分明的页面结构。 5. 图标和图像:EXT内置了丰富的图标库,可以轻松美化界面。 6. 树形视图:用于展现层级关系的数据,支持展开...

    ext的课件,ppt版,适合有面向对象基础人士

    1. Accordion布局:这种布局允许子组件折叠和展开,每个子组件占据一行。它由`Ext.layout.Accordion`定义,适合展示分段内容,如FAQ或层级菜单。 2. Border布局:基于`Ext.layout.BorderLayout`,它将容器划分为五...

    Ext4.0学习总结及功能详解(特别详细)

    Accordion布局,又称为手风琴布局,是一种特殊的布局方式,它只允许一个面板(Panel)在任何时候保持展开状态,其余的面板则默认为折叠。这种布局适用于展示多个相关但内容较多的模块,以节省屏幕空间。在ExtJS4中...

    Ext介绍以及_ext页面布局

    1. **Accordion布局**:这种布局将所有子元素折叠在一个区域内,每次只能展开一个元素。适用于展示一系列可折叠的内容。 2. **Column布局**:Column布局允许你在同一列中按比例或固定宽度分配子元素。通过`...

    sencha touch accordion(折叠) 布局

    `Accordion`布局管理着包含在它内部的所有组件(通常是`Ext.container.Container`的子项,如`Ext.Panel`),这些组件在默认情况下会被隐藏,只有当用户点击时才会展开。布局会自动调整每个面板的高度,确保每次只有...

    Ext-window属性

    在支持一次仅显示一个子组件的布局中,如`Ext.layout.Accordion`、`Ext.layout.CardLayout`和`Ext.layout.FitLayout`,这个属性特别有用。 2. **allowDomMove**: 默认值为`true`,表示在组件渲染过程中允许移动DOM...

    Ext4详细解读

    3. **适用范围**:Accordion布局主要应用于`Ext.Panels`以及所有`Ext.panel.Panel`子项中。 **配置参数详解:** - `title`: 面板的标题。 - `layout`: 指定为`'accordion'`来使用Accordion布局。 - `width`/`...

    EXT 中文帮助手册

    EXT的手风琴布局通过`Ext.layout.container.Accordion`类实现,每个子项都自动设置为填充整个容器的高度或宽度,且只允许一个子项处于展开状态。 EXT 的API文档是学习和开发的重要参考资料,其中包含了所有EXT组件...

    Ext教程.pptExt教程.pptExt教程.ppt

    1. **Accordion布局**:这种布局将容器内的子元素设置为可折叠的形式,每个子元素占据一行,点击时展开或收起。适用于展示多个相关但可以独立浏览的信息块。 2. **Border布局**:基于`Ext.layout.BorderLayout`,...

    Ext中文详解

    accordion布局:accordion布局也称手风琴布局,在accordion布局下,在任何时间里,只有一个面板处于激活状态。其中每个面边都支持展开和折叠。

    学习ExtJS accordion布局

    一、Accordion布局由类Ext.layout.Accordion定义,表示可折叠的布局,点击每一个子元素的头部名称或右边的按钮,则会展开该面板,并收缩其它已经展开的面板。 layoutConfig:true表示在执行展开折叠时启动动画效果,...

    Ext10种布局

    - **定义**:通过 `Ext.layout.Accordion` 类定义,布局名称为 `accordion`。 - **特点**:允许容器中的子元素以可折叠的形式展示。 - **使用技巧**:默认情况下,使用 `ExtAccordion` 布局时会自动展开第一个子元素...

    GWT-ext 布局示例

    树的特性包括但不限于节点的展开和折叠、节点的拖放操作以及节点的选择等。 总的来说,GWT-Ext提供了一套丰富的布局选项,帮助开发者轻松地构建复杂的用户界面,同时其对树结构的支持使得数据组织和导航变得更加...

    基于ext的j2ee开发

    - **Layout**:Ext框架提供了多种布局方式,例如AccordionLayout(手风琴布局)、FormLayout(表单布局)和ColumnLayout(列布局)等。其中,BorderLayout尤其适用于构建多区域的界面布局,它将页面分为五个部分(东...

    EXT中文手册8

    - **AccordionLayout**:类似于手风琴的效果,可以展开或收缩包含的面板,每次只展示一个面板的内容。 - **CardLayout**:将容器中的每个组件视为一张卡片,一次只显示一张卡片,适用于向导、多页面信息展示等场景...

Global site tag (gtag.js) - Google Analytics