unitTreeStore = Ext.create('Ext.data.TreeStore', {
storeId:'unitTreeStore',
nodeParam: 'pid', //向服务端发送结点的名称,默认为node
defaultRootId: '', //向服务端发送root结点的值
proxy: {
type : 'ajax',
url : 'unit/getUnits.do',
reader : {
type : 'json',
}
}
});
var unitTreePanel = Ext.create("Ext.tree.Panel",{
title: '单位列表',
width: 250,
region: 'west',
store: unitTreeStore,
rootVisible: false
});
//让ext全屏显示
Ext.create('Ext.container.Viewport',{
layout:'border',//Border布局
items: [unitTreePanel]
});
服务器返回的字符串是:[{ id : '2',text : '分公司1',leaf:false},{ id : '3',text : '分公司2',leaf:true},{ id : '4',text : '分公司3',leaf:true},{ id : '5',text : '分公司4',leaf:true},{ id : '6',text : '分公司5',leaf:true},{ id : '7',text : '分公司6',leaf:true}]
不管你用的是struts还是spring mvc只要返回是类似于这样的json字符串就行啦
在这儿主要说明一点默认第一次发送url为http://localhost:8989/oa_project/unit/getUnits.do?node=root
而我上面的代码发送的是http://localhost:8989/oa_project/unit/getUnits.do?pid=
如果你不想发送参数名是node而是pid可以这样设置:nodeParam: 'pid'
root结点的默认值为root,这样在后台还的单独处理,你可以设置为0或者是其他的值,只需要加上一条这样的
语句:defaultRootId: 0
效果图如下:
- 大小: 3.6 KB
分享到:
相关推荐
异步加载树型是 ExtJS Tree 的一个重要特性,允许只在需要时动态加载子节点,从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX 请求实现,只有当用户展开一个节点时,才会向服务器请求该节点的子节点数据...
本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构,结合AJAX技术实现JSON数据的高效传输。 首先,我们要理解什么是动态异步加载。在传统的网页开发中,如果一次性加载所有数据,可能会导致页面加载速度慢,...
在ExtJS4中实现树结构的异步加载,主要涉及以下几个关键概念: 1. **TreeStore**: TreeStore是树结构的数据源,它负责管理与服务器之间的数据通信。对于异步加载,我们需要配置TreeStore,设置`autoLoad`为`false`...
在家研究了一下extjs异步树,-每个节点都异步加载-前后台代码都有-附整个工程-运行通过-前台代码请看doctree.js,后台代码请看TreeService.java,运行环境:Myeclipse6.5+tomcat7.0.27
2. **异步加载**: 在动态加载树中,数据通常不是一次性全部加载,而是通过异步请求获取。Extjs的TreeLoader或TreeStore负责处理这些请求,当用户展开节点时,会发送Ajax请求到服务器获取子节点数据。 3. **数据模型...
4. **TreeLoader**:负责实际的异步加载操作,它会触发Ajax请求获取子节点。可以配置`nodeParam`属性,告诉服务器请求的是哪个节点的子节点。 5. **UI 自定义**:因为下拉树需要与下拉框结合,所以可能需要自定义`...
本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能,包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验,同时减轻服务器的压力。在实际开发过程中,还需要根据具体...
而异步加载则是在用户滚动或展开节点时才请求并加载相关的子节点,显著减少了初始加载时间,提升了用户体验。 在Ext Js 2中,实现异步树的关键是使用`TreeLoader`对象。这个对象负责与服务器进行通信,获取并解析...
8. **Ext.data.Store与Model的异步加载**: ExtJS的Store对象与Model类结合,可以轻松实现异步数据加载和刷新。Store自动处理Ajax请求,获取并处理服务器返回的数据。 通过深入学习和实践这些知识点,开发者可以...
AMD(Asynchronous Module Definition)或CommonJS是两种常见的模块规范,它们提供了异步加载模块的机制。在非浏览器环境中,如Node.js,常使用CommonJS,而在浏览器环境中,由于其异步特性,AMD(如RequireJS)更...
动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...
8. **Ajax请求**:如果图片存储在远程服务器,可能需要使用Ajax技术异步加载图片数据,提高用户体验。 9. **Layouts(布局)**:根据需要,应用可能采用各种布局方式,如fit布局(适应容器大小)、border布局(分...
可以配置异步加载(loading data on demand)和分页(paging)等功能。 - **路由(Routing)**:在SPA(Single Page Application)中,路由用于管理页面导航。在ExtJS 4 MVC中,可以使用路由来实现URL与视图间的...
通过连接到数据源(如JSON或XML),Store可以在后台异步加载数据,同时也支持实时数据绑定,当数据变化时,视图会自动更新。 3. **View(视图)**:视图层是用户界面的表示,包括控件、面板、表格等。在ExtJS中,...
在实际项目中,你可能还会遇到数据加载、异步通信(使用Ajax)和状态管理等问题,ExtJS4提供了解决这些问题的强大工具,如Store和Proxy。同时,不要忽视性能优化,合理使用组件配置和内存管理技巧,可以使你的应用...
这时,远程加载数据就显得尤为重要,它通过异步请求从服务器获取数据,只在需要时才加载,显著提高了用户体验。 远程加载数据的核心在于Store和Ajax源。Store是ExtJS中管理数据的容器,它可以连接到各种数据源,...
具体实现可能包括按需异步加载、懒加载等技术。 在实际应用中,ExtJS4和ASP.NET MVC的结合提供了前后端分离的优势,两者之间的通信通常依赖于Ajax请求,例如使用Ext.Ajax或Ext.data.Store的proxy来实现。后端提供...
ExtJS4是一款强大的JavaScript库,专门用于构建富客户端应用程序。这个文档集合包含了关于ExtJS4的详尽资料,是开发者学习和深入理解该框架的重要资源。文档覆盖了多个关键组件和概念,包括"data"(数据管理)、...
当数据是异步加载时,可以结合`Ext.util.DelayedTask`来延迟显示加载遮罩,确保用户操作后立即显示。 3. **自定义动画** 通过CSS3动画,你可以创建更复杂的加载效果,如旋转的加载图标、滑动的文字提示等。 总结...
请注意,ExtJS4的异步加载机制并不是默认开启的。在使用之前,需要通过Ext.Loader.setConfig来配置相关的选项,并确保enabled属性设置为true。 在给出的例子中,lesson2.html页面并没有在初始加载时加载ux目录下的...