【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的典型 ...
随机推荐
- scalaWindows和Linux搭建
Windows搭建 https://www.cnblogs.com/freeweb/p/5623372.html Linux搭建 https://www.cnblogs.com/freeweb/p/5 ...
- MongoDB YAML格式的配置文件
根据官网的提示内容,默认的配置文件内容为 systemLog: verbosity: 0 quiet: false # traceAllExceptions: <boolean> sysl ...
- Android-ContentProvider流程
Android-ContentProvider原理及流程 Android为什么设计出一个ContentProvider ? 答:ContentProvider的出现主要是暴露数据出去,暴露什么数据呢 ...
- C#设计模式--工厂模式之简单模式
简单工厂模式定义:简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一.简单工厂模式是由一个工厂对象决定创建出哪一种产品 ...
- eclipse 创建maven
下载地址自行搜索关键字:“eclipse官网”即可,注意下版本,32bit or 64bit. maven插件以及svn等相关插件安装设置问题不在这里赘述,有时间的话会发布出来. 在这里说一下,第一. ...
- javascript AJAX简单原理及什么是ajax
AJAX简单原理供初学者理解 AJAX的原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...
- oracle goldengate的两种用法
此文已由作者赵欣授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 自从oracle收购来了goldengate这款产品并以后对它做了一系列改进后,有非常多的用户使用它做数据迁移 ...
- 「HNOI 2013」比赛
题目链接 戳我 \(Solution\) 这道题观察数据范围发现很小,再看看题目可以发现是搜索. 这题纯搜索会\(T\)所以要加入适当剪枝 如果一个人后面的比赛都赢却依旧到不了目标分数,则直接\(re ...
- 洛谷P4548 [CTSC2006]歌唱王国(概率生成函数)
题面 传送门 给定一个长度为\(L\)的序列\(A\).然后每次掷一个标有\(1\)到\(m\)的公平骰子并将其上的数字加入到初始为空的序列\(B\)的末尾,如果序列B中已经出现了给定序列\(A\), ...
- 你不可不知的 React Native 混合用法(Android 篇)
前言 当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的"底蕴"无疑更深,拥 ...