今天开始,我们就开始一起学习TreePanel了，道个歉，上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列(2)--Ext.Panel 1.第一个静态树--最简单的树 效果图: html代码:

<div id="container">     </div>

js代码:


Ext.onReady(function(){    var mytree=new Ext.tree.TreePanel({        el:"container",//应用到的html元素id       animate:true,//以动画形式伸展,收缩子节点       title:"Extjs静态树",        collapsible:true,        rootVisible:true,//是否显示根节点       autoScroll:true,        autoHeight:true,        width:,        lines:true,//节点之间连接的横竖线       loader:new Ext.tree.TreeLoader(),//       root:new Ext.tree.AsyncTreeNode({            id:"root",            text:"根节点",//节点名称           expanded:true,//展开           leaf:false,//是否为叶子节点           children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:""}]}]        })    });    mytree.render();//不要忘记render()下,不然不显示哦})

在这里,我谈一个问题:

/*只有loader和AsyncTreeNode才能使children显示出来,为什么?*/     我在api中没有找到答案,甚至连children都没有看到,但是在原代码中,我们可以确定这个事实,只有loader实例后,AsyncTreeNode的children才会被递归的添加(appendChild)到它的父节点下,所以象示例中的代码,一定要注意条件.     其他的子节点问题不受此限制!

TreePanel基本配置参数:


//TreePanel配置参数.animate:true//展开,收缩动画,false时,则没有动画效果.autoHeight:true//自动高度,默认为false.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop).enableDrop:true//仅仅drop.lines:true//节点间的虚线条.loader:Ext.tree.TreeLoader//加载节点数据.root:Ext.tree.TreeNode//根节点.rootVisible:false//false不显示根节点,默认为true.trackMouseOver:false//false则mouseover无效果.useArrows:true//小箭头

2.通过TreeNode自定义静态树

例子1其实很受数据的限制，必须先要准备好数组对象，我们用另外的方式再写个例子，在写例子前，我们来学习下 TreeNode的基本配置参数:


//TreeNode常用配置参数.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框.expanded:fasle//展开,默认不展开.href:"http:/www.cnblogs.com"//节点的链接地址.hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开.leaf:true//叶子节点,看情况设置.qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下.text:"节点文本"//节点文本.singleClickExpand:true//用单击文本展开,默认为双击

效果图:

html代码:

<body style="margin:10px;">     <div id="container">     </div>     <iframe name="mainFrame" id="mainFrame" height="100px" width="200px" src="jstest.htm"></iframe>

</body>

js代码:


Ext.onReady(function(){     Ext.QuickTips.init();    var mytree=new Ext.tree.TreePanel({        el:"container",        animate:true,        title:"Extjs静态树",        collapsible:true,        enableDD:true,        enableDrag:true,        rootVisible:true,        autoScroll:true,        autoHeight:true,        width:,        lines:true    });       //根节点   var root=new Ext.tree.TreeNode({        id:"root",        text:"控制面板",        expanded:true    });       //第一个子节点及其子节点   var sub1=new Ext.tree.TreeNode({        id:"news",        text:"新闻管理",        singleClickExpand:true    });    sub1.appendChild(new Ext.tree.TreeNode({        id:"addNews",        text:"添加新闻",        href:"http://www.baidu.com",        hrefTarget:"mainFrame",        qtip:"打开百度",        listeners:{//监听           "click":function(node,e){                       alert(node.text)                   }        }    }));    sub1.appendChild(new Ext.tree.TreeNode({        id:"editNews",        text:"编辑新闻"    }));    sub1.appendChild(new Ext.tree.TreeNode({        id:"delNews",        text:"删除新闻"    }));       root.appendChild(sub1);       root.appendChild(new Ext.tree.TreeNode({         id:"sys",         text:"系统设置"    }));       mytree.setRootNode(root);//设置根节点       mytree.render();//不要忘记render()下,不然不显示哦})

3.用TreeLoader加载数据生成树

//这里只介绍TreeLoader的参数一个     dataUrl:"*****.**"//地址     url:"****.**"//url参数和dataUrl参数一样

效果图: html代码:

<div id="container">

    </div> 

js代码:


Ext.onReady(function(){     Ext.QuickTips.init();    var mytree=new Ext.tree.TreePanel({        el:"container",        animate:true,        title:"简单Extjs动态树",        collapsible:true,        enableDD:true,        enableDrag:true,        rootVisible:true,        autoScroll:true,        autoHeight:true,        width:,        lines:true,        //这里简简单单的loader的几行代码是取数据的,很经典哦       loader:new Ext.tree.TreeLoader({           dataUrl:"json.ashx"        })    });       //根节点   var root=new Ext.tree.AsyncTreeNode({        id:"root",        text:"控制面板",        expanded:true    });       mytree.setRootNode(root);    mytree.render();//不要忘记render()下,不然不显示哦})

上面的代码中dataUrl地址为json.ashx的代码是怎样呢？ 让我们先来思考一个问题：


/*---dataUrl的地址返回的内容必须为数组对象形式，但是.net页面如何返回这样的格式？---*/     我的解决方案:把.net数据转换为json对象。                  using System.Web.Script.Serialization;                  public string ToJson(object o)                  {                     JavaScriptSerializer j =new JavaScriptSerializer();                     return j.Serialize(o);                  }    这里的o，我们可以定义个类的对象，传进去，转换为json对象

json.ashx代码:


using System; using System.Web; using System.Collections.Generic; using System.Web.Script.Serialization;

public class jsondata  {     //定义jsondata类，存放节点数据    public string id;     public string text;     public bool leaf;     public List<jsondata> children=new List<jsondata>();//存放子节点}

public class json : IHttpHandler {     public List<jsondata> jsdata=new List<jsondata>();     public void ProcessRequest (HttpContext context) {

        for (int i =; i <; i++)         {             jsondata jd =new jsondata();             jd.id="num"+i;             jd.text ="节点"+i;             jd.leaf =false;             for (int j =; j <; j++)             {                 jsondata subjd =new jsondata();                 subjd.id ="sub"+ j;                 subjd.text ="子节点"+ j;                 subjd.leaf =true;                 jd.children.Add(subjd);             }                jsdata.Add(jd);         }          context.Response.Write(ToJson(jsdata.ToArray()));//ToArray()在IE里面好像缺了不行    }       public bool IsReusable {         get {             returnfalse;         }     }

    public string ToJson(object o)     {         //序列化对象为json数据，很重要！        JavaScriptSerializer j =new JavaScriptSerializer();         return j.Serialize(o);     } }

异步获取它的数据: 好了。 这里是模拟出数据，从数据库中取出数据再处理为节点数据 ，一个道理！

今天我们算是对TreePanel的最基本的使用有个基础的认识，谢谢支持！

ExtJs2.0学习系列(12)--Ext.TreePanel之第一式的更多相关文章

  1. Caffe学习系列(12)：训练和测试自己的图片--linux平台

    Caffe学习系列(12):训练和测试自己的图片   学习caffe的目的,不是简单的做几个练习,最终还是要用到自己的实际项目或科研中.因此,本文介绍一下,从自己的原始图片到lmdb数据,再到训练和测 ...

  2. Caffe学习系列(12)：训练和测试自己的图片

    学习caffe的目的,不是简单的做几个练习,最终还是要用到自己的实际项目或科研中.因此,本文介绍一下,从自己的原始图片到lmdb数据,再到训练和测试模型的整个流程. 一.准备数据 有条件的同学,可以去 ...

  3. 转 Caffe学习系列(12)：训练和测试自己的图片

    学习caffe的目的,不是简单的做几个练习,最终还是要用到自己的实际项目或科研中.因此,本文介绍一下,从自己的原始图片到lmdb数据,再到训练和测试模型的整个流程. 一.准备数据 有条件的同学,可以去 ...

  4. Android学习系列(12)--App列表之拖拽GridView

    根据前面文章中ListView拖拽的实现原理,我们也是很容易实现推拽GridView的,下面我就以相同步骤实现基本的GridView拖拽效果.     因为GridView不用做分组处理,代码处理起来 ...

  5. OAuth2.0学习（1-2）OAuth2.0的一个企业级应用场景 - 新浪开放平台微博OAuth2.0认证

    http://open.weibo.com/wiki/%E9%A6%96%E9%A1%B5 开发者可以先浏览OAuth2.0的接口文档,熟悉OAuth2.0的接口及参数的含义,然后我们根据应用场景各自 ...

  6. CobaltStrike逆向学习系列(12)：RDI 任务发布流程分析

    这是[信安成长计划]的第 12 篇文章 0x00 目录 0x01 任务构建 0x02 结果处理 0x03 功能 DLL 分析 之前的分析都是针对整个 CS 的框架来进行的,但是功能也是整个 C2 中相 ...

  7. Caffe学习系列(12)：不同格式下计算图片的均值和caffe.proto

    均值是所有训练样本的均值,减去之后再进行训练会提高其速度和精度. 1.caffe下的均值 数据格式是二进制的binaryproto,作者提供了计算均值的文件compute_image_mean, 计算 ...

  8. Spring4.0学习笔记(12) —— JDBCTemplate 操作数据库

    整体配置 1.配置xml文件 <beans:beans xmlns="http://www.springframework.org/schema/mvc" xmlns:xsi ...

  9. Django学习系列12:把Python变量传入模板中渲染

    从视图的Python代码中把变量传入HTML模板. 模板中使用哪种句法引入Python对象,要使用的符号{{...}},它会以字符串的形式显示对象: <html> <head> ...

随机推荐

  1. virsh 命令最新整理。 每个“;”之后是正解

    1,migrate --domain --destURL --dname  --live(热迁移) migrate lf 192.168.16.3 dname 2,managedsave domain ...

  2. Python 库汇总中文版

    这又是一个 Awesome XXX 系列的资源整理,由 vinta 发起和维护.内容包括:Web框架.网络爬虫.网络内容提取.模板引擎.数据库.数据可视化.图片处理.文本处理.自然语言处理.机器学习. ...

  3. php直接输出json格式

    php直接输出json格式,很多新手有一个误区,以为用echo json_encode($data);这样就是输出json数据了,没错这样输出文本是json格式文本而不是json数据,正确的写法是应该 ...

  4. python继承问题

    python构造函数:__init__(): 如果子类定义了自己的__init__构造方法函数,当子类的实例对象被创建时,子类只会执行自己的__init__方法函数,如果子类未定义自己的构造方法函数, ...

  5. PlantUML——1.Hello

    官网: http://www.plantuml.com/ 第一步: 下载 plantuml.jar文件: 第二步:创建一个demo.txt文件(与plantuml.jar在同一目录),内容如下: @s ...

  6. （My）SQL

    1.SQL语句分类 DDL(Data Definition Languages)语句:用来创建 删除 修改数据库.表.列.索引等数据库对象.常用的语句关键字主要包括create.drop.alter等 ...

  7. Centos bash: make: command not found

    一般出现这个bash: make: command not found提示,是因为安装系统的时候使用的是最小化mini安装,系统没有安装make.vim等常用命令,直接yum安装下即可: yum -y ...

  8. 自定义mvc验证特性，手机号号段老增加，给自定义一个RegularExpress

    public class PhoneExpressionAttribute: RegularExpressionAttribute, IClientValidatable { public Phone ...

  9. vars 变量预解析

    JavaScript中,你可以在函数的任何位置声明多个var语句,并且它们就好像是在函数顶部声明一样发挥作用,这种行为称为 hoisting(悬置/置顶解析/预解析).当你使用了一个变量,然后不久在函 ...

  10. 洛谷P4151 [WC2011] 最大XOR和路径 [线性基，DFS]

    题目传送门 最大XOR和路径 格式难调,题面就不放了. 分析: 一道需要深刻理解线性基的题目. 好久没打过线性基的题了,一开始看到这题还是有点蒙逼的,想了几种方法全被否定了.还是看了大佬的题解才会做的 ...