【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的典型 ...
随机推荐
- Digester学习笔记(二)转载
为便于理解,将笔记的内容结构作了一些调整. 对象栈 对digester技术最普通的应用,是用来动态创建一个由Java对象构成的树结构,各对象的属性以及对象间的关系,基于XML文档的内容来设置(XML文 ...
- POJ 3581 Sequence(后缀数组)
Description Given a sequence, {A1, A2, ..., An} which is guaranteed A1 > A2, ..., An, you are to ...
- LightOJ 1044 Palindrome Partitioning(简单字符串DP)
A palindrome partition is the partitioning of a string such that each separate substring is a palind ...
- [LeetCode 题解]: pow(x,n)
前言 [LeetCode 题解]系列传送门: http://www.cnblogs.com/double-win/category/573499.html 1.题目描述 Implement po ...
- leetcode 两个数组的交集 II
给定两个数组,写一个方法来计算它们的交集. 例如: 给定 nums1 = [1, 2, 2, 1], nums2 = [2, 2], 返回 [2, 2]. /** * @param {number[] ...
- WPF 修改dev GridControl行背景色
<dxg:TableView.RowStyle> <Style TargetType="dxg:RowControl" > <Style.Trigge ...
- django DatabaseFunctions
from django.db.functions import ... Cast() 转换类型 value = Value.objects.annotate(field_as_float=Cast(' ...
- chipmunk几何算法
/* Copyright (c) 2007 Scott Lembcke * * Permission is hereby granted, free of charge, to any person ...
- ParserError: Error tokenizing data. C error: Expected 2 fields in line 15, saw 4
pandas 读取泰坦尼克号数据,报错 %matplotlib inline import numpy as np import pandas as pd import re as re train ...
- Linux基础实验(一)
一)基础实验:1. Unix中常见shell及其命令(shell的缩写) Bourne shell (sh) Korn shell (ksh) C shell (csh) ...