一直想使用 extjs5 treeStroe with Proxy 方式一次性load 所有树形结构数据,结果没成功,
treeStroe 在每次点击展开的时候都会发起请求到后台,url里面还增加node参数。
只能做成异步加载了。每次只load 当前节点的子节点。
Ext.define('publicweb.store.MenuTreeStore', {
extend: 'Ext.data.TreeStore',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MenuTreeStore',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'menu.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}, cfg)]);
}
});
treepanel:
{
xtype: 'treepanel',
store: 'MenuTreeStore',
viewConfig: {
}
}
分享到:
相关推荐
根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...
TreeStore是ExtJS中用于表示树形数据结构的组件,它可以与各种UI组件(如TreePanel)配合使用,展示层级化的数据。在这个主题中,我们将深入探讨如何结合TreeStore和pagingToolbar实现分页功能。 在传统的表格数据...
在这个例子中,`TreePanel`使用`TreeStore`从`tree_data.json`加载数据,并且隐藏了根节点。 标签“源码”和“工具”暗示了这篇博客可能还讨论了EXTJS的源代码以及如何使用EXTJS作为开发工具来实现动态加载功能。...
1. 创建一个TreeStore,指定数据源和加载策略(例如,使用`proxy`配置项设置远程数据源)。 2. 在TreePanel中关联这个TreeStore,并配置必要的属性,如`rootVisible`(是否显示根节点)、`displayField`(显示节点...
5. 绑定事件:可以为TreePanel绑定各种事件,如`itemclick`、`itemexpand`等,以响应用户的操作。 以下是一个简单的ExtJS TreePanel示例代码: ```javascript Ext.application({ name: 'MyApp', launch: ...
在EXTJS中,可以使用`TreeStore`类,并设置`paging`属性为`true`。还需要定义`proxy`,通常使用`AjaxProxy`或`RestProxy`,并配置相应的URL,用于向服务器请求数据。 3. 数据模型与分页参数 在`TreeStore`中,每个...
这可以通过配置store的`proxy`实现,通常使用AjaxProxy。 在描述中提到,这个示例是基于Java的。在实际开发中,后端服务器通常使用Java编写,通过RESTful API提供JSON数据给前端的ExtJS应用。树数据可能包含层级...
2. 如果数据需要从服务器动态获取,可以利用`Ext.tree.TreeLoader`或`Ext.data.TreeStore`的`proxy`配置来实现。以下是一个简单的例子,展示如何从Servlet获取JSON数据: ```javascript var tree = Ext.create('Ext....
总的来说,EXTJS的树形搜索功能是通过结合TreePanel、TreeStore和过滤机制实现的,它提供了灵活的搜索选项,能够满足不同场景下的数据查找需求。通过深入理解和运用这些知识点,我们可以构建出功能强大、用户体验...
在ExtJS中,可以使用`Ext.data.proxy.WCF`作为数据代理,配置WCF的服务地址和方法,以异步方式加载树数据。 7. **自定义节点** 除了基本的文本和图标,节点还可以包含其他组件,如按钮、输入框等,以增强交互性。...
我们需要创建一个`Ext.data.TreeStore`,并指定它的`root`、`proxy`(通常是`AjaxProxy`)以及`model`,确保数据能正确加载到TreePanel中。 5. **Default Selection**: 默认值选中可以通过在初始化TreePanel时设置`...
在给定的“ExtJS samples”压缩包中,我们可以期待找到关于如何使用ExtJS的TreePanel和TreeNode的相关示例。TreePanel是ExtJS中的一个组件,用于展示层次结构的数据,而TreeNode则是TreePanel的基本构建块,代表树形...
动态加载通常通过配置`rootVisible: false`、`loadMask: true`以及设置`treeStore`的`proxy`和`autoload`属性来实现,同时配合使用`treeStore.load()`方法来异步加载数据。 接下来是增删改查(CRUD)操作。在ExtJS ...
动态加载可以通过在`Ext.data.TreeStore`中设置`proxy`和`autoLoad`属性来实现。 ### 自定义事件与交互 ExtJS的Tree组件还提供了一系列事件,如`beforeitemexpand`、`itemexpand`、`itemcollapse`等,这些事件可以...
总结来说,动态加载树ExtJS + ASP.NET的实现涉及到前端的ExtJS TreePanel、TreeStore,以及后端的ASP.NET服务。通过这种方式,我们可以创建高效、响应式的树形界面,同时减少不必要的网络传输,提升应用性能。
对于异步加载,一般使用 `ajax` 类型的 proxy,并设置 `url` 参数指向服务器端接口。 2. **TreeModel**:定义树节点的数据结构,包括 id、text、children 等属性。在异步加载中,children 属性通常为空或未定义,...
它使用TreeStore来存储和管理数据,而TreeStore可以通过Ajax proxy与服务器进行通信,获取JSON格式的树数据。 **Ajax集成** Ajax(Asynchronous JavaScript and XML)是实现Web应用异步通信的技术,允许在不刷新...
这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码,旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的一个前端框架,广泛应用于构建富互联网应用程序(RIA)。 在ExtJS中,...
在本示例中,我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构,特别是在数据库操作方面,如添加和删除树节点。这涉及到JavaScript编程,特别是ExtJS框架的理解,以及与后台数据库(例如Access)的交互。 ...
在前端,使用ExtJs创建TreePanel,并配置它的store指向Struts2 Action的URL,以获取动态数据。例如: ```javascript var treeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: '/...