Ext.layout.Accordion 事件

最新推荐文章于 2016-10-21 13:21:16 发布

原创最新推荐文章于 2016-10-21 13:21:16 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Accordion #Event #事件

ExtJs 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用 ExtJS 的 Accordion 布局来实现网站导航菜单的优化，通过监听 beforeexpand 事件动态加载子目录，提高用户体验。

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]);
	}

}