开发者博客：www.developsearch.com
Ext.data.TreeStore远程加载树节点有两种常用方式，分别是：分级加载和整体加载。
对于结构复杂数据量大的树结构使用分级加载可以极大提高程序响应速度并提升用户体验。
客户端：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'treecolumn.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-all.js" ></script>
<script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//定义数据模型
Ext.regModel("OrgInfo",{
fields:['orgId','name','count']
});
var myStore=new Ext.data.TreeStore({
model:'OrgInfo',
nodeParam:'orgId', //节点参数名
proxy:{
type:'ajax',
url:'treestore/treeServer.jsp',
reader:'json'
},
autoLoad:true,
root:{
name:'根节点',
expanded : true,//根节点是否展开
id:'-1'
}
});
Ext.create('Ext.tree.Panel',{
title:'分级异步加载树节点示例',
renderTo:Ext.getBody(),
width:250,
height:200,
columns:[{
xtype:'treecolumn', //树状表格列
text:'公司名称',
dataIndex:'name',
width:150,
sortable:true
},
{
text:'员工人数',
dataIndex:'count',
flex:1,
sortable:true
}],
store:myStore,
rootVisible:false //,隐藏根节点
//useArrows:true
});
});
</script>
</head>
<body>
</body>
</html>
服务器端：treeServer.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String orgId=request.getParameter("orgId");
String result="";
if("-1".equals(orgId)){
result="[{name:'总公司',count:100,id:100}]";
}else if("100".equals(orgId)){
result="[{name:'分公司一',count:20,id:110},{name:'分公司二',count:80,id:120}]";
}else if("120".equals(orgId)){
result="[{name:'部门一',count:30,id:121,leaf:true},{name:'部门二',count:50,id:122,leaf:true}]";
}
response.getWriter().write(result);
%>
注：所有示例来自《ExtJS Web 应用程序开发指南》第2版
这是第13章，开始没有得到想要的效果。后来问了其他朋友才知道少了
expanded : true,这行代码，没有默认展开根节点。
如果加上 useArrows:true 在树节点中使用箭头 ，效果如图usearrow.jpg
开发者博客：www.developsearch.com
相关推荐
为了实现动态加载，EXT树使用了`Ext.data.TreeStore`，它是一个专门用来处理树形数据的存储类。TreeStore可以通过配置`proxy`来指定数据源，通常使用Ajax或ScriptTagProxy来实现异步加载。以下是一个基本配置示例： ...
这里定义了一个`TreePanel`，它使用`AsyncTreeNode`作为根节点，并配置了异步加载器(`TreeLoader`)，该加载器指向了一个XML文件，该文件包含了树形菜单的具体数据。 #### 4. 添加链接及事件处理 为了让树形菜单中...
在Ext 4.0版本中，下拉树的实现主要依赖于几个关键组件：`Ext.tree.Panel`（树面板）、`Ext.form.field.Tree`（树形字段）以及可能用到的`Ext.data.TreeStore`（树存储）。下面我们将详细探讨这些知识点： 1. **Ext...
总之，“磁盘目录树（EXT-js）”是一个利用EXT-js的强大功能来呈现和操作文件系统目录的应用，它结合了异步加载、CheckBox选择、事件驱动和拖放操作等特性，为用户提供了一个直观、易用的Web界面。通过深入学习EXT-...
store: Ext.create('Ext.data.TreeStore', { model: 'TreeNode', proxy: { type: 'ajax', url: 'tree_data.json', reader: { type: 'json', root: 'nodes' } }, autoLoad: true }), rootVisible: false...
var treeStore = Ext.create('Ext.data.TreeStore', { model: 'TreeNodeModel', autoLoad: false, proxy: { type: 'ajax', url: 'treeData.php', // 服务器端处理异步请求的URL reader: { type: 'json', ...
- 创建树存储（EXT.data.TreeStore），并加载数据 - 创建EXT.form.field.TreeCombo实例，配置store、displayField、valueField等属性 - 添加事件监听器，如'expand'、'select'等 - 将COMBO TREE组件添加到一个布局...
7.5.11 树节点：ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器：ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
1. `store`：定义数据存储对象，可以是Ext.data.TreeStore，用于保存树形结构的数据。 2. `displayField`：指定显示在下拉框中的字段，通常是从树节点数据中提取的属性。 3. `valueField`：选择后记录的值，通常是树...
2. ` store`: 存储节点数据的Ext.data.TreeStore对象，需要包含节点数据的模型（Model）和数据源（DataSource）。 3. ` root`: 作为树的根节点，通常包含在store中。 4. ` checkboxes`: 如果需要，可以启用复选框...
2. **定义数据源**（store）：树节点的数据通常存储在Ext.data.TreeStore中，每个节点代表一个记录，包含id、text、children等字段。可以使用Ext.data.Model定义模型，然后通过Ext.data.TreeStore加载数据。 ```...
Ext JS的Tree组件支持动态加载，可以按需请求和显示子节点，极大地提高了用户体验。 接着，我们来看**Direct Web Remoting (DWR)**。DWR是一种让Java方法可以直接在JavaScript中调用的技术，无需编写复杂的AJAX代码...
- `Ext.data.TreeStore`用于管理树节点数据，它可以连接到服务器进行异步加载。 3. **节点操作**： - `expand()`: 展开节点。 - `collapse()`: 折叠节点。 - `select()`: 选择节点。 - `unselect()`: 取消选择...
节点的数据通常是通过`Ext.data.TreeStore`来管理的，这是一个特殊的`Ext.data.Store`，专门用于处理树形数据。 **树形结构的配置与功能：** - **展开和折叠：** 可以通过`expanded`属性来控制节点的展开和折叠状态...
2. 创建`Ext.data.TreeStore`实例，将数据源与树连接起来。TreeStore负责加载、解析和管理树的节点数据。 3. 创建`Ext.tree.Panel`实例，设置其配置项，如树的标题、工具栏、列配置等。同时，通过`store`属性绑定到...
- **TreeStore**: 用于管理树的数据，可以动态加载子节点。 8. **窗口和对话框（Windows and Dialogs）** - **Ext.window.Window**: 创建浮动窗口，可以包含任意组件。 - **Ext.MessageBox**: 弹出对话框，用于...
EXT提供了`Ext.data.TreeStore`类，用于存储和管理树结构的数据。你可以设置`TreeStore`的`proxy`属性，配置Ajax数据源，指定URL以获取JSON数据。同时，定义`model`属性来描述树节点的数据结构。 ```javascript var...
1. **树形结构展示**：FileTree使用了Ext.data.TreeStore来存储和管理文件系统的层级结构。TreeStore将文件夹和文件组织成节点，每个节点可以有子节点，形成树状结构。 2. **异步加载**：FileTree支持异步加载，这...
4. 数据加载：异步加载子节点，以提高性能和用户体验。 5. 节点操作：添加、删除、移动和更新节点。 6. 事件监听：如节点选择、展开、折叠等事件的监听和处理。 7. 自定义渲染：根据需求自定义节点的显示样式和内容...
var treeStore = Ext.create('Ext.data.TreeStore', { model: 'TreeNode', // TreeNode是自定义的数据模型 proxy: { type: 'ajax', // 使用AJAX代理 url: 'tree-data.php', // JSON数据的获取地址 reader: { ...