Ext.onReady(function(){
var Tree = Ext.tree;
var tree = new Tree.TreePanel('tree', {
animate:true,
enableDD:false,
loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
lines: true,
selModel: new Ext.tree.MultiSelectionModel(),
containerScroll: false
});
var json =
[
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "TT", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
}]
},
{"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "CTS", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "CTS-V", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
}]
}
];
var root = new Tree.AsyncTreeNode({
text: 'Autos',
draggable:false,
id:'source',
children: json
});
tree.setRootNode(root);
tree.render(tree);
root.expand();
});
分享到：
相关推荐
它提供了丰富的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树"可能是指一种优化过的...