页面
<div id="main-ct" style="width:100%;height:100%;"></div>
脚本
Ext.onReady(function(){
var xt = Ext.tree;
// turn on quick tips
Ext.QuickTips.init();
var cview = Ext.DomHelper.append('main-ct',
{cn:[{id:'main-tb'},{id:'cbody'}]}
);
// create our layout
var layout = new Ext.BorderLayout('main-ct', {
center: {
title:'Components',
margins:{left:3,right:3,bottom:3,top:3}
}
}, 'main-ct');
layout.batchAdd({
center : {
el: cview,
autoScroll:true,
fitToFrame:true,
resizeEl:'cbody'
}
});
// the component tree
var ctree = new xt.TreePanel('cbody', {
animate:true,
enableDD:true,
containerScroll: true,
lines:false,
rootVisible:false
});
var croot = new xt.AsyncTreeNode({
allowDrag:false,
allowDrop:false,
id:'croot',
text:'Packages and Components',
cls:'croot',
loader:new Ext.tree.TreeLoader({
dataUrl:'/tmp1.json'
})
});
ctree.setRootNode(croot);
ctree.render();
croot.expand();
});
JSON文件
[{"text":"profil1@anonyme.ca",
"id":"10\/1",
"cls":"cmp",
"leaf":false,
"children":[{"text":"Favoris",
"id":"10\/1\/favoris",
"cls":"cmp",
"leaf":false,
"children":[{"text":"une Fiche",
"id":"10\/1\/favoris\/idFiche",
"cls":"cmp",
"leaf":true,
},
{"text":"un sous-dossier de Favoris",
"id":"10\/1\/favoris\/sousDossier",
"cls":"cmp",
"leaf":false,
"children":[{"text":"une Fiche",
"id":"10\/1\/favoris\/idFiche",
"cls":"cmp",
"leaf":true}]
}]
},
{"text":"Poubelle",
"id":"10\/1\/poubelle",
"cls":"cmp",
"allowDrop":true,
"leaf":true}
]
}]
我运行这个例子,在firefox下正常显示,而IE下却什么都不显示,看一下。谢谢了
分享到:
相关推荐
EXT Tree 是一个强大的JavaScript组件,它是EXT JS框架的一部分,用于构建可交互的树形数据结构。EXT Tree在网页中常用于展示层次结构的数据,如文件系统、组织结构或导航菜单等。EXT Tree提供了丰富的功能,包括...
【标题】"ext TREE"指的是在软件开发领域中,尤其是Java Web开发中,EXT JS库中的Tree组件。EXT JS是一个强大的JavaScript用户界面库,用于构建富客户端应用。Tree组件是EXT JS中的一个重要部分,它允许开发者创建可...
标题中的"oa.rar_ext_ext java oa_ext oa_ext tree_java ext tree"似乎是一个组合字符串,它可能代表了某个项目或教程的文件结构。其中,“oa”可能是项目或系统的名称,而“ext”、“java”、“oa_ext”、“tree_...
Ext Tree 是 Ext JS 库中的一个组件,它用于在用户界面上展示层次化的数据结构,类似于文件系统的目录结构。在给定的资源中,我们有多个 HTML 文件(tree2.html, tres.html, s1.html, tree.html)和 JavaScript 文件...
6. **代码实践**:`extTree.js` 文件很可能是实现 EXT Tree 的具体代码。在这个实践中,开发者可能定义了一个 TreePanel,并设置了相应的配置项,加载了数据,注册了事件处理器。通过阅读和分析这个文件,可以深入...
在本文中,我们将深入探讨如何使用Ext JS的Tree Panel与JSON数据进行动态加载,并实现多选和单选功能。Ext JS是一种强大的JavaScript库,用于构建富客户端应用,而Tree Panel则是展示层次结构数据的一种组件。在后台...
ExtTree是Ext JS库中的一个组件,用于创建和展示树形结构的数据。它在Web应用程序中广泛使用,特别是在需要组织和导航层次结构信息时。在本案例中,“extTree例子点击出现界面”指的是用户在浏览ExtTree时,通过点击...
EXT TREE扩展CHECKBOX JS是一种在EXT JS框架下对树形组件(Tree Panel)进行增强,实现复选框功能的技术。EXT JS是一个强大的JavaScript GUI库,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。在EXT JS中,...
EXT Tree是EXT JS库中的一个组件,用于在Web应用程序中展示层次结构的数据。EXT JS是一个强大的JavaScript UI框架,提供了一系列的可复用组件,EXT Tree就是其中之一,它可以帮助开发者构建功能丰富的树形视图,常...
在本文中,我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻...
在EXT JS框架中,"ext grid tree 应用"是一个常见的功能组合,它结合了Grid面板和Tree面板的优势,用于展示复杂的数据结构。Grid通常用于显示二维表格数据,而Tree则用于展示层次化的数据。在这个例子中,开发者通过...
Ext Tree JSON Demo是一个基于ExtJS库实现的异步加载树形结构的示例项目。ExtJS是一个强大的JavaScript UI框架,广泛用于构建富客户端应用程序。在本项目中,它被用来展示如何利用JSON数据来动态加载树节点,提高...
在EXT JS这个强大的JavaScript库中,Tree组件是一个用于展示层级数据的重要工具。"Ext 带多选的Tree"指的是在EXT JS的Tree组件中集成了多选功能,允许用户通过复选框来选择多个树节点,从而实现批量操作或者进行多级...
在EXT JS框架中,"ext tree 分页"是一种优化技术,用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件(TreePanel)中,如果一次性加载所有节点,特别是当树结构非常深或者节点数量巨大时,不仅会消耗大量...
在EXT JS这个强大的JavaScript框架中,`Tree`和`Grid`是两个非常重要的组件,用于构建数据密集型的用户界面。在"ext tree grid 的高级实例运用"中,我们将深入探讨如何有效地结合这两个组件,实现复杂的交互功能。...
"ext tree json 例子(不含EXT包)"这个标题暗示我们将讨论如何在不直接引用EXT完整包的情况下,仅使用EXT JS中关于TreePanel和JSON解析的部分来构建一个动态的树形结构。这可能涉及到手动引入EXT的核心组件,如...
"Ext tree 结合dwr 调用后台数据"这个主题涉及到两个关键的技术:Ext JS的Tree组件和Direct Web Remoting (DWR)。这两个技术的结合使得前端用户界面能够动态地展示并操作后台的数据。 首先,让我们来了解一下**Ext ...
`Ext.Tree.Panel`是EXT JS库中的一个重要组件,用于展示层次结构的数据,通常用作树形菜单或文件系统目录的视图。这个组件是EXT JS框架中用于创建交互式、可扩展的树结构的工具。以下是对`Ext.Tree.Panel`相关知识的...
Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载
在这个场景中,"JSP EXT 遍历 TREE"涉及到的是如何在JSP页面上使用EXT框架来遍历和操作TREE组件。 首先,EXT-all.css和ext-all.js是EXT框架的核心文件。前者包含了EXT所有组件的样式,确保界面的美观和一致性;后者...