在ExtJS中,构造一个树形结构变得很简单。

  需要用到的:

    Ext.tree.Panel

      TreePanel提供树形结构的UI表示的树状结构数据。 一个TreePanel必须绑定一个Ext.data.TreeStore。TreePanel通过columns配置,支持多列。

    Ext.data.TreeStore

      TreeStore是一个允许内嵌数据的存储区实现。

      它为加载节点提供了一些方便的方法, 并能够使用分层树状结构来结合一个store。 此类也可以方便的从Tree中进行传播一些事件。

  此外,还有能用到的一些配置属性:

    Ext.data.TreeStore:

      expanded: true/false  //用来设置文件夹默认展开(true)或者收缩(false),默认为false

      root: {}         //根节点,节点设置的开始

      children: [{},{}]     //子节点的开始

      leaf: true/false      //用来辨识该文件是否还有子节点,从而判断是否为本节点渲染展开图标或箭头。true为没有子节点,默认为flase

    Ext.tree.Panel:

      store: store      //该树结构关联的数据store

      rootVisible: true/false //是否隐藏根节点

  其他诸如"width"、"height"、margin、border、renderTo等皆有的配置属性就不提了。


  接下来,上代码:

Ext.define('My.TreeStore',{
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
children: [
{ text: 'src', expanded: true, children: [
{ text: 'file1',leaf: true },
{ text: 'file2',leaf: true }
]},
{text: 'file', leaf: true}
]
}
}); Ext.define('My.TreePanel',{
extend: 'Ext.tree.TreePanel',
xtype: 'mytreepanel',
width: ,
rootVisible: true,
}); Ext.onReady(function(){
var store = Ext.create('My.TreeStore');
var treepanel = Ext.create('My.TreePanel',{
store: store,
renderTo: Ext.getBody()
});
});

结果:

      


  下一步,通过后台遍历文件目录,然后Extjs向后台发出请求,后台响应回一个JSON格式的数据,再然后生成遍历树,给树添加点击事件,在另一个panel里构建一个资源管理器,点击遍历树的文件夹会在资源管理器里展示文件夹内的所有文件......暂时考虑到这里吧。

【ExtJS】一个简单的TreePanel的更多相关文章

  1. Ext4 简单的treepanel

    转载:http://blog.csdn.net/zyujie/article/details/8208499 最近在学习Ext4,记录一些有关Ext4实现控件的方法: Ext4的treePanel和之 ...

  2. Extjs6(三)——用extjs6.0写一个简单页面

    本文基于ext-6.0.0 一.关于border布局 在用ext做项目的过程中,最常用到的一种布局就是border布局,现在要写的这个简单页面也是运用border布局来做.border布局将页面分为五 ...

  3. perl 引用(数组和hash引用) --- perlreftut - Mark 的一个简单的'引用'教程 ---Understand References Today. --Mark Jason Dominus, Plover Systems (mjd-perl-ref+@plover.com)

    https://blog.csdn.net/fangwei1235/article/details/8570886 首页 博客 学院 下载 论坛 APP 问答 商城 活动 VIP会员 招聘 ITeye ...

  4. 哪种缓存效果高?开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  5. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  6. ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  7. 计算机程序的思维逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库

    57节介绍了字节流, 58节介绍了字符流,它们都是以流的方式读写文件,流的方式有几个限制: 要么读,要么写,不能同时读和写 不能随机读写,只能从头读到尾,且不能重复读,虽然通过缓冲可以实现部分重读,但 ...

  8. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  9. CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能

    CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...

随机推荐

  1. [转载]uml 类图依赖与关联的区别

    原文链接:https://www.cnblogs.com/liuzhang/archive/2013/03/17/2964095.html 最近研究设计模式,看类图有点发虚!有些关系搞的不是很清楚.所 ...

  2. Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法

    最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...

  3. 微信公众平台开发框架 Bee.WeiXin

    我们来看一下如何通过Bee.WeiXin开发微信公众平台.关于微信公众平台的一般性介绍, 这里不做展开. 园里找一找就可以了. 本文主要是介绍Bee.WeXin, 代码已发布到https://beew ...

  4. WinForm使用Label控件模拟分割线(竖向)

    用Label控件进行模拟 宽度设为1:this.lblPagerSpliter1.Size = new System.Drawing.Size(1, 21); 去掉边框:this.lblPagerSp ...

  5. hihocoder1580 Matrix

    题目链接:(vjudge)戳我 从今天开始不咕咕地填坑啦 考虑一般的求最大子矩阵和...我们一般都是DP,或者直接上悬线法递推. 下面附一个DP的代码: #include<iostream> ...

  6. read_csv 函数

    转载自 https://www.cnblogs.com/datablog/p/6127000.html pandas.read_csv参数整理 读取CSV(逗号分割)文件到DataFrame也支持文件 ...

  7. “全栈2019”Java第六十四章:接口与静态方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. 一个标准的AJAX请求

    这是一个标准的ajax请求: $.ajax({ type:"post", url:basePath+"/resourcePush/operationLog", ...

  9. [ActionScript 3.0] 结合FMS实现简单视频录制

    首先在本机上安装Flash Media Server,简称FMS,在测试过程中window防火墙开启可能有影响,可先关闭防火墙,FMS安装好后检查相关服务有没有启动,若没有,可启动任务管理器,点击服务 ...

  10. Objective-C语法基础:面向对象编程特点的总结

    1.类的声明与实现 Objective-C类的声明要写在@interface 与 @end之间,实现要写在@implementation 与 @end之间 2.类的-方法和+方法 类的-方法即类的实例 ...