extjs4.1单击treepanel节点收缩叶子节点
表达的不是很清楚,就是树形菜单,有叶子节点,extjs默认的是双加节点才会收缩和伸展,其实实际中,都想使用方便一些,单击就可以展开叶子节点。如下图
现在的画面中单击系统管理菜单可以收缩,再单击就会展开,很简单一个功能,但是很实用,主要是在treepanel的itemclick定义相关事件,如下:
itemclick: function (tree, record, item, index, e, option) { if(record.get("leaf")==false) { if (record.isExpanded()) { record.collapse(); } else { record.expand(); } return; } }
查看api其实可以指定,record是一个节点记录,具备treepanel的相关属性和事件,所以就好有上面的事件执行。完整代码如下(注意是放在Ext.onReady中):
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 }] });