<html>
<script src="ext20/adapter/ext/ext-base.js" charset="utf-8"></script>
<script src="ext20/ext-all.js" charset="utf-8"></script>
<link href="ext20/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="ext20/resources/css/xtheme-sa.css" rel="stylesheet" type="text/css">
<title>ext test</title>
<script>
Ext.onReady(function(){
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree',
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'treejosn.html'}),
enableDD:true,
containerScroll: true,
singleExpand:true,
dropConfig: {appendOnly:true},
listeners : {
//单击树节点，刷新右边的视图
'click':function(node,e){
//alert(node.id)
}
}
});
// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand(false, /*no anim*/ false);
});
</script>
<body>
<div id="father" style="overflow:auto; height:500px;width:600px;border:1px solid #c3daf9;">
<div id="tree" style="float:left; height:500px;width:40%;border:1px solid #c3daf9;"></div>
<div id="picframe" style="height:500px;border:1px solid #c3daf9; float:left;">
<div id="picdir" style="height:100px;border:1px; background-color:#c3daf9"></div>
<div id="picad" style="height:300px;border:1px; background-color:#39F"></div>
</div>
</div>
</body>
</html>
//=================================================//
treejosn.html:
[{"id":"10","parentId":"-1","text":"12","leaf":false,"children":[
{"id":"33","parentId":"10","text":"computert","leaf":true,"children":[]},
{"id":"34","parentId":"10","text":"computer3","leaf":true,"children":[]}]},
{"id":"7401","parentId":"-1","text":"computer","leaf":false,"children":[]},
{"id":"27","parentId":"-1","text":"database","leaf":false,"children":[]},
{"id":"7201","parentId":"-1","text":"fm","leaf":false,"children":[]},
{"id":"30","parentId":"-1","text":"monitor","leaf":false,"children":[]},
{"id":"44","parentId":"-1","text":"other","leaf":false,"children":[]},
{"id":"1","parentId":"-1","text":"report","leaf":false,"children":[]},
{"id":"201","parentId":"-1","text":"topology","leaf":false,"children":[]}]
分享到：
相关推荐
它提供了丰富的UI组件，包括我们今天要讨论的主题——“Ext树例子”。Ext树（Tree）是一种数据结构，它呈现为层次化的节点集合，常用于展示具有层级关系的数据。在本篇文章中，我们将深入探讨Ext树的基本概念、其...
其中，“Ext树”（Ext Tree）是ExtJS中的一个重要组件，用于展示层级结构的数据，如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先，理解Ext树的基本结构至关重要。一个Ext树由节点...
本文将深入探讨如何使用EXT树控件结合JSON数据进行数据传递和显示，以及如何处理EXT树的事件响应。 首先，EXT树控件的工作原理是基于JSON数据进行渲染。JSON（JavaScript Object Notation）是一种轻量级的数据交换...
在EXT树表中，分页（Pagination）是一项关键功能，用于处理大量数据，提高用户界面的响应速度。当数据量过大时，一次性加载所有数据会导致页面响应变慢，甚至可能使浏览器崩溃。分页允许用户逐步加载和查看数据，...
在本主题中，“ext树的控制选择和撤销”指的是EXT树组件提供的功能，允许用户进行多选、单选，并支持撤销这些操作。 EXT树的核心类是`Ext.tree.TreePanel`，它提供了丰富的配置项和方法来定制和操作树形结构。控制...
【Ext树】是一种基于Ext JS库的图形用户界面组件，用于呈现层次结构的数据。Ext JS是一个强大的JavaScript框架，主要用于构建富客户端应用。在本案例中，“简单的ext树”是一个为初学者设计的基础教程，旨在帮助那些...
首先，让我们了解EXT树形菜单的基本概念。EXT的TreePanel组件是实现树形结构的主要工具，它能够展示层次化的数据，通常用于导航或展现层级关系。树形菜单支持节点的展开、折叠、添加和删除，以及各种交互操作。 要...
从给定的文件信息中，我们可以深入探讨“ext树实例代码”这一主题，了解如何在Ext JS中详细应用tree控件。 ### 标题：ext树实例代码 #### 描述：ext中，tree控件的详细应用，实例。 ### 知识点解析： **1. Ext ...
本文将深入探讨如何处理无限级JSON数据格式并实现动态加载，以优化EXT树的性能。 首先，我们要理解EXT树的基本结构。EXT树的每个节点都是一个`Ext.tree.Node`对象，包含ID、文本、子节点等属性。无限级树意味着树的...
在给定的标题“Ext树形菜单（我自己做的）”中，我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素，它用于展示层次结构的数据，比如文件系统、组织结构或...
EXT Tree 是一个强大的JavaScript组件，它是EXT JS框架的一部分，用于构建可交互的树形结构界面。EXT Tree在Web应用中广泛使用，特别是在需要展示层级关系数据的场景下，如文件系统、组织架构或导航菜单。这个"EXT ...
【EXT树结构详解】 EXT框架中的树结构（Tree）是一种常用的数据展示方式，尤其在复杂的权限管理和分类系统中。在Faceye基础版中，EXT树被广泛应用，如台台管理、RSS订阅分类、用户博客分类、网址导航分类、开源项目...
本篇文章将深入探讨如何根据输入的关键字过滤Ext树节点，类似于MyEclipse中的preferences搜索框功能。 首先，理解“树节点过滤”（Tree Node Filtering）的概念。在ExtJS的树视图中，过滤功能允许用户通过输入...
创建一个基本的EXT树形菜单，首先需要定义一个配置对象，包含`title`（菜单标题）、`store`（存储树形数据的Store）和`rootVisible`（是否显示根节点）等属性。例如： ```javascript var treePanel = Ext.create...
总结来说，"Ext 树的级联选择扩展插件使用说明"涉及到的是在Ext JS环境中，如何利用自定义的`TreeCheckNodeUI.js`插件实现树形控件的级联选择功能。通过理解并运用上述步骤，开发者可以创建出交互性强、用户体验良好...
在IT行业中，静态EXT树是一种特定的数据结构，主要用于优化数据访问和存储，特别是在处理大量静态数据时。这个概念源于Java编程语言，与源码解析、编译和优化有关。在这个场景下，"静态EXT树"可能是指一种优化过的...