`
wangs7345
  • 浏览: 11928 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Ext.layout.Accordion 事件

阅读更多

ExtJs的 Ext.layout.Accordion layout 布局在API中是没有事件的,其实只要监听items中的事件就可以了:

 

listeners : { 
                        beforerender : function (){alert('beforerender');}, 
                        beforecollapse : function(){alert('beforecollapse');}, 
                        beforeexpand : function(){alert('beforeexpand');}, 
                        expand : function(){alert('expand');} 
                    }

 

下面需求为网站进入时默认加载子目录改为点击父目录时才加载,前台代码改动如下:

 

未改动前:

var accordion;
// 第一步,根据用户信息动态构造每个树面板
function createFirstLevelPanel(json) {
	var length = json.length;// json.data.length;
	var pageId;
	var pageName;
	var link_address;
	var treeArray = new Array(length);
	var itemArray = new Array(length);
	var isExpanded;
	var imageStr;
	for (var i = 0; i < length; i++) {
		pageId = json[i].id;
		pageName = json[i].text;
		pageType = json[i].openType;
		treeArray[i] = new Ext.tree.TreePanel({
					rootVisible : false,
					autoHeight : true,
					split : true,
					lines : true,
					autoScroll : false,
					autoWidth : true,
					animate : true,
					enableDD : false,
					border : false,
					containerScroll : true,
					loader : new Ext.tree.TreeLoader({
								dataUrl : url//根据id查询子节点
							}),
					expanded : false,
					root : new Ext.tree.AsyncTreeNode({
								draggable : false,
								id : pageId,
								expanded : false
							}),
					listeners : {
						click : treeClick
					}
				});
		imageStr = "fenxi";
		itemArray[i] = new Ext.Panel({
					title : pageName,
					autoScroll : true,
					autoWidth : true,
					collapsed : true,
					iconCls : imageStr,
					border : false
				});
		itemArray[i].add(treeArray[i]);
	}
	createAccordion(itemArray);
}
// 第二步,将每个Panel加入到accordion中
function createAccordion(itemArray) {
	accordion = new Ext.Panel({
				region : 'center',
				margins : '0 0 0 0',
				split : true,
				autoWidth : true,
				collapsible : false,
				layoutConfig : {
					animate : true
				},
				layout : 'accordion'
			});
	for (var j = 0; j < itemArray.length; j++) {
		accordion.add(itemArray[j]);
	}

}

 

改动后:

var accordion;
// 第一步,根据用户信息动态构造每个树面板
function createFirstLevelPanel(json) {
	var length = json.length;// json.data.length;
	var pageId;
	var pageName;
	var link_address;
	var itemArray = new Array(length);
	var isExpanded;
	var imageStr;
	for (var i = 0; i < length; i++) {
		pageId = json[i].id;
		pageName = json[i].text;
		pageType = json[i].openType;
		imageStr = "fenxi";
		itemArray[i] = new Ext.Panel({
			id : pageId,
			title : pageName,
			autoScroll : true,
			autoWidth : true,
			collapsed : true,
			iconCls : imageStr,
			border : false,
			listeners : {
				beforeexpand : function() {
					this.add(new Ext.tree.TreePanel({
						rootVisible : false,
						autoHeight : true,
						split : true,
						lines : true,
						autoScroll : false,
						autoWidth : true,
						animate : true,
						enableDD : false,
						border : false,
						containerScroll : true,
						loader : new Ext.tree.TreeLoader({
									dataUrl : url//根据id查询子节点
								}),
						expanded : false,
						root : new Ext.tree.AsyncTreeNode({
									draggable : false,
									id : this.getId(),
									expanded : false
								}),
						listeners : {
							click : treeClick
						}
					}))
				}
			}
		});
	}
	createAccordion(itemArray);
}
// 第二步,将每个Panel加入到accordion中
function createAccordion(itemArray) {
	accordion = new Ext.Panel({
				region : 'center',
				margins : '0 0 0 0',
				split : true,
				autoWidth : true,
				collapsible : false,
				layoutConfig : {
					animate : true
				},
				layout : 'accordion'
			});
	for (var j = 0; j < itemArray.length; j++) {
		accordion.add(itemArray[j]);
	}

}

永久链接: http://wangs7345.iteye.com/blog/2087547

分享到:
评论

相关推荐

    Ext Js权威指南(.zip.001

    9.4.6 手风琴布局:ext.layout.container.accordion / 447 9.4.7 锚固布局:ext.layout.container.anchor / 448 9.4.8 绝对定位布局:ext.layout.container.absolute / 450 9.4.9 边框布局:ext.layout....

    Ext-window属性

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

    Ext.Viewport布局

    - **`layout`:** 设置为`'border'`,这是一种多区域布局,可以将屏幕划分为北、南、东、西和中心五个区域,每个区域都可以包含不同的组件。 #### 3. 多区域布局实例解析 在代码中,我们可以看到`Ext.Viewport`内部...

    ext实例 ext操作步骤

    布局由`Ext.layout.Accordion`定义,每个子组件按照折叠的方式呈现。 2. **Border布局**:此布局将容器分为五个区域——东(east)、南(south)、西(west)、北(north)和中心(center)。通过`Ext.layout....

    Ext10种布局

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

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

    3. **Column布局**:通过`Ext.layout.ColumnLayout`实现,视作一列,子元素可以指定`columnWidth`(百分比宽度)或`width`(固定像素宽度)来决定占据的列宽。可以混合使用这两种方式,灵活地调整列的宽度。 4. **...

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

    它由`Ext.layout.Accordion`定义,适合展示分段内容,如FAQ或层级菜单。 2. Border布局:基于`Ext.layout.BorderLayout`,它将容器划分为五个区域:东(east)、南(south)、西(west)、北(north)和中心...

    Ext.form.FieldSet的用法.pdf

    6. **layout**:FieldSet 使用的布局类型,可以选择 `accordion`、`anchor`、`border`、`card`、`column`、`fit`、`form` 或 `table`。可以通过 `layoutConfig` 配置进一步定制布局参数。 7. **animCollapse**:...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    27. Renamed &lt;ext:Accordion&gt; to &lt;ext:AccordionLayout&gt; 28. Removed DataReader class .ReaderID property. 29. JsonReader: added IDProperty (instead of ReaderID) 30. XmlReader: added IDPath (instead...

    Accordion布局

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

    Ext.form.FieldSet的用法.docx

    6. **layout**: FieldSet可以使用多种布局模式,如accordion、anchor、border、card、column、fit、form和table。每种布局都有其特定的用途和配置方式。 7. **animCollapse**: 如果设置为`true`,FieldSet在展开和...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    ExtjS--accordion布局

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

    精通JS脚本之ExtJS框架.part1.rar

    11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...

    学习ExtJS accordion布局

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

    精通JS脚本之ExtJS框架.part2.rar

    11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...

    GWT-ext 布局示例

    通过 `com.gwtext.client.widgets.layout.AccordionLayout` 类,可以创建如图4所示的手风琴效果,其中每个子Panel只显示一个,其他被折叠。 在GWT-Ext中,布局管理器是构建用户界面的关键组件,它们决定了组件如何...

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

    通过`layout: 'accordion'`启用,可以设置`layoutConfig.animate`为`true`实现动画效果,增加交互性。 6. Card布局: Card布局类似于翻页或步骤向导,一次仅显示一个子组件。`activeItem`属性指定当前可见的子组件...

    ExtJs4_笔记.docx

    - **layout**:涵盖多种布局模式,如absolute、accordion、border等,用于构建复杂的用户界面。 这些章节深入浅出地展示了ExtJs4的强大功能和灵活性,为开发者提供了丰富的参考资料,无论是新手还是经验丰富的...

Global site tag (gtag.js) - Google Analytics