【ExtJS】一个简单的TreePanel
在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的更多相关文章
- Ext4 简单的treepanel
转载:http://blog.csdn.net/zyujie/article/details/8208499 最近在学习Ext4,记录一些有关Ext4实现控件的方法: Ext4的treePanel和之 ...
- Extjs6(三)——用extjs6.0写一个简单页面
本文基于ext-6.0.0 一.关于border布局 在用ext做项目的过程中,最常用到的一种布局就是border布局,现在要写的这个简单页面也是运用border布局来做.border布局将页面分为五 ...
- 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 ...
- 哪种缓存效果高?开源一个简单的缓存组件j2cache
背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...
- 在Openfire上弄一个简单的推送系统
推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...
- ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- 计算机程序的思维逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库
57节介绍了字节流, 58节介绍了字符流,它们都是以流的方式读写文件,流的方式有几个限制: 要么读,要么写,不能同时读和写 不能随机读写,只能从头读到尾,且不能重复读,虽然通过缓冲可以实现部分重读,但 ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能
CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...
随机推荐
- [转载]uml 类图依赖与关联的区别
原文链接:https://www.cnblogs.com/liuzhang/archive/2013/03/17/2964095.html 最近研究设计模式,看类图有点发虚!有些关系搞的不是很清楚.所 ...
- Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...
- 微信公众平台开发框架 Bee.WeiXin
我们来看一下如何通过Bee.WeiXin开发微信公众平台.关于微信公众平台的一般性介绍, 这里不做展开. 园里找一找就可以了. 本文主要是介绍Bee.WeXin, 代码已发布到https://beew ...
- WinForm使用Label控件模拟分割线(竖向)
用Label控件进行模拟 宽度设为1:this.lblPagerSpliter1.Size = new System.Drawing.Size(1, 21); 去掉边框:this.lblPagerSp ...
- hihocoder1580 Matrix
题目链接:(vjudge)戳我 从今天开始不咕咕地填坑啦 考虑一般的求最大子矩阵和...我们一般都是DP,或者直接上悬线法递推. 下面附一个DP的代码: #include<iostream> ...
- read_csv 函数
转载自 https://www.cnblogs.com/datablog/p/6127000.html pandas.read_csv参数整理 读取CSV(逗号分割)文件到DataFrame也支持文件 ...
- “全栈2019”Java第六十四章:接口与静态方法详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 一个标准的AJAX请求
这是一个标准的ajax请求: $.ajax({ type:"post", url:basePath+"/resourcePush/operationLog", ...
- [ActionScript 3.0] 结合FMS实现简单视频录制
首先在本机上安装Flash Media Server,简称FMS,在测试过程中window防火墙开启可能有影响,可先关闭防火墙,FMS安装好后检查相关服务有没有启动,若没有,可启动任务管理器,点击服务 ...
- Objective-C语法基础:面向对象编程特点的总结
1.类的声明与实现 Objective-C类的声明要写在@interface 与 @end之间,实现要写在@implementation 与 @end之间 2.类的-方法和+方法 类的-方法即类的实例 ...