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