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