html文件中加入
<script src="treedata.js"></script>
/**
* 动态加载JSON格式的数据
*/
var mytree_2=new Ext.tree.TreePanel({
//el:"container",//应用到的html元素id
animate:true,//以动画形式伸展,收缩子节点
//title:"Extjs静态树",
//collapsible:true,
rootVisible:true,//是否显示根节点
autoScroll:true,
autoHeight:true,
//height:'100%',
width:'100%',
lines:true,//节点之间连接的横竖线
//树加载器(TreeLoader)的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。返回值必须是以树格式的javascript数组
loader: new Ext.tree.TreeLoader({
preloadChildren: true,//若为true,则loader在节点第一次访问时加载"children"的属性
clearOnLoad: false//(可选)默认为true。在读取数据前移除已存在的节点
}),
root: new Ext.tree.AsyncTreeNode({
text:'ExtJs',
id:'root',
expanded:true,
children:[Docs.classData]
}),
collapseFirst:false
});
treedata.js内容
var Docs = {};
Docs.classData={
"id":"root",
"iconCls":"icon-docs",
"text":"根节点",
"singleClickExpand":true,
"expanded":true,
"leaf":false,
"children":[{
"id":"id1",
"iconCls":"icon-pkg",
"text":"子节点一",
"qtip":"asdk",//需要使用 Ext.QuickTips.init();//开启提示功能
"singleClickExpand":true,
"expanded":true,
"leaf":true
},{
"id":"child2",
"iconCls":"icon-pkg",
"text":"子节点二",
"singleClickExpand":true,//单击节点是否展开
"expanded":true,
"leaf":false,
"children":[{
"id":"child21",
"iconCls":"icon-pkg",
"text":"子节点三",
"singleClickExpand":true,//单击节点是否展开
"expanded":true,
"leaf":true
}]
}]
};
分享到:
相关推荐
总的来说,"Extjs Json树封装"涉及的核心知识点有:JSON数据格式、ExtJS树形组件、树加载器(`JsonTreeLoader`)、可能的自定义插件(`JsonPluginTreeLoader`)以及如何在实际应用中配置和使用它们。理解并熟练运用...
标题“Extjs 动态加载树”涉及到的是一个前端开发技术话题,主要集中在使用Extjs框架构建能够动态加载数据的树形结构。Extjs是一个基于JavaScript的组件化UI库,常用于开发富客户端应用。动态加载树(Dynamic ...
通过以上步骤,我们可以构建一个动态的、基于SSH和ExtJS的树形结构,其中JSON数据作为数据交换格式,使得前后端能有效通信。这种方法不仅方便了数据的传递,还简化了页面与服务器之间的交互,提高了用户体验。
在本文中,我们将探讨如何结合 ExtJS、JSON 和 Struts2 实现一个动态加载的树形菜单。ExtJS 是一个流行的 JavaScript 框架,用于构建富客户端应用,它支持多种数据源,包括 JSON。Struts2 是一个 Java Web 开发框架...
这个对象能够加载JSON数据,并提供了一种灵活的方式来操作和绑定数据到组件。首先,你需要定义一个Store,包括其配置项如URL(指向后端接口的路径)和模型(Model,定义了数据的结构): ```javascript var store =...
"Extjs 无限树菜单 后台拼接json"这个主题涉及到如何在后端生成无限级别的树形菜单数据,并通过JSON格式传输到前端进行渲染。 首先,我们要理解树形菜单的基本概念。树形菜单是一种以节点和层级关系展示数据的控件...
在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...
标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合,通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库,用于构建富客户端Web应用程序,而Struts是Java Web开发中的一个MVC...
在ExtJS4中实现树结构的异步加载,主要涉及以下几个关键概念: 1. **TreeStore**: TreeStore是树结构的数据源,它负责管理与服务器之间的数据通信。对于异步加载,我们需要配置TreeStore,设置`autoLoad`为`false`...
动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次加载时的数据量。 动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作...
2. 数据源:动态树的数据通常来自服务器,通过Ajax请求获取JSON格式的节点数据。这些数据包括节点ID、文本、子节点等信息。 3. 节点模型:每个树节点都是一个`Ext.data.Model`实例,包含节点属性如id、text、leaf等...
在页面中,定义一个TreePanel,设置其store属性为一个AjaxStore,用来异步加载JSON数据。AjaxStore会向服务器发送请求,接收返回的JSON数据并自动构建树结构。 6. **配置AjaxStore**:AjaxStore需要配置URL(指向...
总结,使用ExtJS结合AJAX和JSON数据格式,可以构建出动态异步加载的树形组件。这种方式既节省了网络资源,又保证了用户界面的流畅性。在实际开发中,可以根据项目需求进一步定制树的样式、交互以及数据处理逻辑。
压缩文件中包含了两个文件,第一个文件详细说明了在页面上EXTJS如何使用JSON对象进行数据的查询与加载。第二个文件详细说明了在后台JAVA类中,如何对JSON对象进行处理,并返回JSON对象,以供前台页面使用
在本文中,我们将深入探讨如何使用ExtJS框架的Tree组件,结合JSON数据格式以及Struts 2框架,来实现Ajax动态加载树形结构的节点。这是一项常见的需求,特别是在构建可扩展、用户友好的Web应用时,动态加载的树结构...
4. **Json Store**: 数据存储在JSON格式中,这是ExtJS常用的存储方式。我们需要创建一个`Ext.data.TreeStore`,并指定它的`root`、`proxy`(通常是`AjaxProxy`)以及`model`,确保数据能正确加载到TreePanel中。 5....
标题 "Extjs 从远程获取json类型的list数据" 涉及的是在Web开发中使用Extjs框架与服务器进行交互,获取JSON格式的数据并展示在列表(List)组件中的技术。Extjs是一款强大的JavaScript库,用于构建富客户端的桌面级...
本主题主要探讨如何在ExtJS框架下,结合ASP.NET后端技术,实现动态加载树形结构数据。以下是对这个知识点的详细阐述: 首先,ExtJS是一个强大的JavaScript库,用于构建富客户端应用。它提供了丰富的组件库,包括树...
在ExtJS动态树中,Struts需要将后端数据转化为JSON格式,以便前端解析。JSON对象通常包含键值对,数组和嵌套的对象,可以方便地表示复杂的数据结构。 3. **Struts2 Action和Result**: 在Struts2框架中,Action类是...