此篇treepanel的描写是很简单,没有太大的难度,在学习时,可以先熟悉tree的一些配置信息、属性、方法和事件。

然后先写一个简单的例子,慢慢了解从中如何实现的,然后在慢慢的深入了解,实现一些复杂的效果。

在实现此效果的同时,发现一个问题,就是如果节点的id设置相同,tree首次展现是没有问题,但点击节点展开和收缩会发现数据在莫名其妙的增加,

同时节点会出现混乱的状况,如果用户同时又单击节点,触发其他效果的,严重可能会导致浏览器崩溃。在此要留意数据id不能重复。

以下就开始贴出实现的代码:

            Ext.onReady(function(){
// Ext.Msg.alert("提示","hello world") var treeData = [
{id:"1001",name:"wind",tel:"18603071234"}, {id:"1002",name:"小月",tel:"18603073578"},
{id:"1003",name:"冷清雪",tel:"18603073569"}, {id:"1004",name:"布隆",tel:"18603073214"},
{id:"1005",name:"莫甘娜",tel:"18603072568"}, {id:"1006",name:"阿里",tel:"18603073247"},
{id:"1007",name:"阿卡丽",tel:"18603071563"}, {id:"1008",name:"卡特",tel:"18603071234"},
{id:"1009",name:"死歌",tel:"18603071234"},
] var children = []
for(var i in treeData)
{
children.push({ text: treeData[i].name, id: treeData[i].id, leaf: true });
} var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
text:"活动",
id: 0,
expanded: true, //设置节点展开
children: children
}
}); //创建TreePanel
var treePanelObj = Ext.create("Ext.tree.Panel", {
region: "west",
header: false,
border: false,
height:500,
autoScroll: true,
animate: true,
rootVisible: true, //设置根节点显示
collapsible: true,
// cls: "GridTree",
// style:"margin-top:0px;",
store: treeStore,
listeners:{
itemclick: function (view, record, item, index, e, eOpts) {
// 单击节点事件,包括根节点
// 此处代码自己可以实现。。。
},
load:function(){
// 此处可以设置节点默认被选中
}
}
}); //选中后激活itemclick事件里的内容需要 绑定select事件才可以
var treeRecord = treePanelObj.getRootNode().getChildAt(0);
var id = treeRecord.data.id;// 获取节点ID数据
//设置选中节点被选中状态
treePanelObj.getSelectionModel().select(treeRecord, false, false); var win = Ext.create("Ext.window.Window",{
width:400,
height:500,
id:"MyTreeWindow",
title:"Tree菜单显示",
items:treePanelObj
}); win.show(); });

显示效果:

异常原因:

如果展开和收缩节点,出现节点混乱问题,先确定节点的id是否唯一

 

Extjs中创建Tree菜单【一】的更多相关文章

  1. 在Magento 2中创建管理员菜单

    在Magento 2中创建管理员菜单 第1步:创建menu.xml 第2步:添加菜单项 第3步:刷新Magento缓存 第1步:创建menu.xml 创建名为:menu.xml文件的管理菜单文件 ap ...

  2. ExtJS中给Tree节点加click事件

    第一种: 直接通过TreePanel中的Config Option中的listener来添加,代码如下: var TreePan = new Ext.tree.TreePanel({ id: 'Tre ...

  3. Android在Activity中与Fragment中创建自定义菜单的区别

    区别就在这里,Activity中添加菜单要这样: public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R ...

  4. 33. Extjs中的tree节点的操作

      转自:https://blog.csdn.net/masterShaw/article/details/51354351?utm_source=blogkpcl9 ext 树节点操作   tree ...

  5. ExtJs中实现tree节点,全部是单击展开和收缩效果,和收藏夹点击功能一样

    listeners : { click : function(node, c) {// 单击节点事件(node是节点对象) if(!node.isLeaf()){//不是叶子节点 node.singl ...

  6. 如何快速在odoo中创建自己的菜单

    上一篇内容:如何快速创建odoo模块,使用脚手架快速创建自己的odoo应用app 前言 在上一个教程中,我们已经实现了对模块的创建,现在我们要对创建的模块添加内容,这个教程将教你如何在odoo菜单中创 ...

  7. liunx中图形化桌面环境中的脚本编程之——创建文本菜单

    整体是通过建立菜单布局,然后根据菜单上的布局建立函数(就是为这些布局实现功能),最后将函数和布局实现逻辑上的相连: 如何建立菜单布局? 整体上是通过打印字符创建出,因此需要使用echo命令,但是有一些 ...

  8. Android开发 ---代码创建选项菜单、隐藏菜单项、菜单的生命周期,菜单按钮图标设置、搜索框、xml中设置子菜单

    1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding="utf-8"?> < ...

  9. 【VisualStdio】在VS2015中显示上下文菜单中“创建单元测试”菜单

    ---恢复内容开始--- VS2012以后创建单元测试的选项被默认隐藏了,创建单元测试变得无比低效率.看msdn的说法好像是想推荐使用Intell Test来替代单元测试的用途,但是还没摸清楚也不敢瞎 ...

随机推荐

  1. error: WatchKit App doesn't contain any WatchKit Extensions whose WKAppBundleIdentifier matches

    error: WatchKit App doesn't contain any WatchKit Extensions whose WKAppBundleIdentifier matches &quo ...

  2. YII 1.0 验证码

    public function actions(){ return array ( ‘captcha’=> array( ‘class’=> ‘CCatpchaAction’, ‘heig ...

  3. mysql 用户管理 权限控制

    添加用户 insert into mysql.user(Host,User,Password) values("%","shenen",password(&qu ...

  4. php 显示sqlserver二进制图片

    <? header("Content-type:image/ "); // Server in the this format: \ or // , when using a ...

  5. JS效果的步骤

    一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a.  display:none;         显示为无,不占据空间 b.  vi ...

  6. mybatis判断集合为空或者元素个数为零

    mybatis判断集合为空或者元素个数为零: <if test="mlhs != null and mlhs.size() != 0"> and t.mlh_name ...

  7. 基于Casperjs的网页抓取技术【抓取豆瓣信息网络爬虫实战示例】

    CasperJS is a navigation scripting & testing utility for the PhantomJS (WebKit) and SlimerJS (Ge ...

  8. 《JAVASCRIPT高级程序设计》事件委托和模拟事件

    由于事件处理程序可以为现代web应用提供交互能力,因此许多开发人员不分青红皂白向页面中添加大量的处理程序:这在某些语言中不会导致问题,但是在javascript,事件处理程序数量直接关系到页面的整体运 ...

  9. [html5] 学习笔记-服务器推送事件

    1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是Html5规范的一个组成部分,可以用来从服务端实时推送数据到浏览器端. 传统的服务器推送技术----WebSo ...

  10. .Net基础体系和跨框架开发普及

    .net体系经过十几年发展,发生了很多变化.特别是在最近两年,随着开源和跨平台的发展,衍生出很多概念,像标准库,可移植库,.Net Core等,相信有不少同学对他们之间的关系是有一些困惑的,这里我从基 ...