您的位置:首页 > Web前端 > JavaScript

extjs4.1单击treepanel节点收缩叶子节点

2013-09-12 17:05 309 查看
表达的不是很清楚,就是树形菜单,有叶子节点,extjs默认的是双加节点才会收缩和伸展,其实实际中,都想使用方便一些,单击就可以展开叶子节点。如下图

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
id: "1001", text: "欢迎页面", leaf: true, url: "欢迎页面"
}, {
text: "系统管理", expanded: true,
children: [{
id: "1002", text: "角色管理", leaf: true, url: "角色管理"
}, {
id: "1003", text: "用户管理", leaf: true, url: "用户管理"
}]
}, {
text: "系统日志", leaf: true, url: "系统日志"
}]
}
});

var menuTree = Ext.create('Ext.tree.Panel', {
store: store,
listeners: {
itemclick: function (tree, record, item, index, e, option) {
if (record.get("leaf") == true) {

var tab = Ext.getCmp("tab" + record.get("id"));
if (tab) {
tab.show();
}
else {
tabPanel.add({
id: "tab" + record.get("id"),
closable: true,
html: record.get("text"),

title: record.get("text")
}).show();
}
}
else {

if (record.isExpanded()) {
record.collapse();
} else {
record.expand();
}
return;

}

}
}
});

var tabPanel = Ext.create("Ext.tab.Panel", {
id: "centerTab",
items: [{
title: "欢迎",
id: "1000",
html: "欢迎你的到来"
}]
});

Ext.create("Ext.container.Viewport", {
layout: "border",
items: [{
region: "north",
title: "演示系统",
height: 100
}, {
region: "west",
title: "系统菜单",
width: 200,
layout: "fit",
items: menuTree
}, {
region: "center",
layout: "fit",
border: false,
items: tabPanel
}]
});


View Code
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: