extjs4.1单击treepanel节点收缩叶子节点
2013-09-12 17:05
309 查看
表达的不是很清楚,就是树形菜单,有叶子节点,extjs默认的是双加节点才会收缩和伸展,其实实际中,都想使用方便一些,单击就可以展开叶子节点。如下图
View Code
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
相关文章推荐
- 获取Extjs中的TreePanel中所有的被checked的叶子节点的id
- ExtJs4.1的TreePanel获得选中叶子的id和文本
- ExtJs中实现tree节点,全部是单击展开和收缩效果,和收藏夹点击功能一样
- EXTJS 4: 如何动态的改变treepanel中节点的文字
- Extjs treepanel 取消选择选中的节点
- easyui-tree根据叶子节点获取父节点值(N层)
- extjs4.2 隐藏treePanel 的节点
- 关于 extjs treepanel 复选框 选中 父节点 的问题
- 如何让 extjs treepanel 支持动态root节点
- ext.net TreePanel单击取值
- Flex中如何利用defaultLeafIcon样式,去掉Tree叶子节点图标
- extjs4 treepanel、 树、节点的操作
- Flex中判断Tree的节点是否是叶子节点的做法
- EXT.NET 使用总结(2) ---TreePanel(带右键菜单,节点自定义属性)
- ext4 treePanel 设计节点级联选中
- ExtJs3.4 TreePanel级联勾选节点并实现父节点节点半选
- Ext TreePanel 取得根节点
- 如何获取TreePanel中勾选了CheckBox的节点集合【Ext.Net 1.0】
- ext TreePanel 一次递归加载数据及异步加载数据(点子节点加载数据)
- Flex中如何去掉Tree控件默认文件夹图标、叶子节点图标