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

View Code

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

View Code

转载于:https://www.cnblogs.com/mayantao/p/3317330.html

extjs4.1单击treepanel节点收缩叶子节点相关推荐

JAVA8 获取叶节点_Java找出所有的根节点到叶子节点的节点值之和等于sum 的路径...
题目描述给定一个二叉树和一个值 sum,请找出所有的根节点到叶子节点的节点值之和等于 sum 的路径, 例如: 给出如下的二叉树,sum=22, 返回 [ [5,4,11,2], [5,8,9] ] ...
常考数据结构与算法----给定一个二叉树和一个值 sum，请找出所有的根节点到叶子节点的节点值之和等于sum 的路径，
题目描述给定一个二叉树和一个值sum,请找出所有的根节点到叶子节点的节点值之和等于sum 的路径, 例如: 给出如下的二叉树,sum=22, 返回 [ [5,4,11,2], [5,8,9] ] 示 ...
二叉树二度节点和叶子节点之间的数量关系
结论:二叉树中度数为2的节点数量比叶子节点少一个证明:设0度节点(叶子节点).一度节点.二度节点数量分别为n0,n1,n2 那么总的点数为n=n0+n1+n2. 而边的数量为m=n-1(树的性质) ...
每天一道LeetCode-----计算二叉树所有根节点到叶子节点的和
Sum Root to Leaf Numbers 原题链接Sum Root to Leaf Numbers 二叉树每个从根节点到叶子节点的路径都代表一个整数,计算所有整数的和只需要遍历一遍整棵数即可 ...
每天一道LeetCode-----以字符串的形式输出二叉树所有从根节点到叶子节点的路径
Binary Tree Paths 原题链接Binary Tree Paths 将二叉树中所有从根节点到叶子节点的路径以字符串的形式输出出来直接遍历即可,注意只有左右子节点都是空节点时才叫叶子节点 ...
数据结构-树：根节点、子节点、叶子节点是什么？
前言:这个属于数据结构:树. 下面给个例子图解释(根节点.子节点.叶子节点). 上图数字 1.3.7是叶子节点:(因为他们下面没有分叉出子节点,所以称为:叶子节点)[度为0] 数字2.8是子节点: ( ...
leetcode 112 --- 二叉树根节点到叶子节点和为指定值的路径
1 题目给定一个二叉树和一个值sum,请找出所有的根节点到叶子节点的节点值之和等于sum 的路径. 2 解法用递归的方法,如果当前不是叶子节点,就把sum减去当前的值,并把当前节点当作路径节点pu ...
二叉树的度为2的节点和叶子节点的关系
不知道度为2的节点,和叶子节点的概念,可以看点击[二叉树简介] 等下.我要发挥我发画图神功了. (手动捂脸).jpg 我觉得我画的这个图不错了.将就这看把.. 总结公式等于用 x 代表度为2的结 ...
java计算二叉树的节点最小值_求二叉树根节点到叶子节点路径和的最小值：遍历（递归+非递归）...
昨晚中兴笔试题,第一题是给定二叉树,每个节点的数据结构是 value,left,right,比较根节点到各个叶子节点路径和的大小,输出路径和的最小值.(补充:用ArrayList可以存储) 以前没做过 ...

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

extjs4.1单击treepanel节点收缩叶子节点相关推荐

最新文章

热门文章