本文转自:javascript:mctmp(0);
extjs4.0 tree的刷新问题困扰了我好一段时间,看官方的例子,看api,百度谷歌是一顿搜索,但是始终不得其解。因为是要对树进行增删改的操作,所以想到只要我点了保存按钮,我让tree一次性刷新岂不是很方便的事情。treestore.load(),多方便啊,可是事实总不如愿,我是有多少节点,它就给我刷新多少次啊。去百度查,有人说load()里面是需要参数的,你想刷新哪个点就把哪个节点放进去。。。结果依然如旧。然后就是看treestore方法的各种源码,当然看不太懂,总好过瞎比划。后来想到折中的办法了。
我不是要最树进行增删改么,我就用treestore.getRootNode()或者treestore.getRootById(object id).这两个方法的返回值是Ext.data.NodeInterface.这个对象是有insert,remove方法的,可以对获取到的节点的子节点进行操作。
所以啊,如果我对tree添加了一个节点,那我就先根据id找到它的父节点,然后在调用insertChild( Number index, Ext.data.Model node ) 或者insertBefore( Node node, Node refNode, Object suppressEvents ) 方法进行添加。删除呢就是同样的找到父节点再调用removeChild( Node node, Boolean destroy, Object suppressEvents, Object suppressNodeUpdate )方法就OK。修改呢就调用replaceChild( Node newChild, Node oldChild, Object suppressEvents )。这个如果对于简单的tree来说还好办,但是如果tree数据量大,层数多,逻辑复杂的就不好整了,反正后来我是自己整迷糊了。
再后来,又回归原点,想整个刷新,一劳永逸,又是各种问,还真让我问到了。。。就是重写treestore.load()方法
Ext.override(Ext.data.TreeStore, {
load : function(options) {
options = options || {};
options.params = options.params || {};
var me = this, node = options.node || me.tree.getRootNode(), root;
// If there is not a node it means the user hasnt defined a rootnode
// yet. In this case lets just
// create one for them.
if (!node) {
node = me.setRootNode( {
expanded : true
});
}
if (me.clearOnLoad) {
node.removeAll(false);
}
Ext.applyIf(options, {
node : node
});
options.params[me.nodeParam] = node ? node.getId() : 'root';
if (node) {
node.set('loading', true);
}
return me.callParent( [ options ]);
}
});
复制粘贴到JS里面,然后慷慨大方的调用load()方法吧。。。
分享到:
相关推荐
Extjs 4.0中文版API
第二十讲:extjs4.0的高级组件tree+grid整合案例补充 第二十一讲:extjs4.0的高级组件form上 第二十二讲:extjs4.0的高级组件form中 第二十三讲:extjs4.0的高级组件form下 第二十四讲:extjs4.0的高级组件form...
在《ExtJs4.0 手册中文版》中,你可以找到关于ExtJS 4.0的全面介绍和详细指南。这个手册涵盖了框架的基础知识,如MVC架构、组件系统、数据绑定以及事件处理机制。此外,它还深入讲解了如何使用各种组件,如GridPanel...
4.0版本对浏览器兼容性进行了全面优化,支持主流的浏览器,同时通过改进渲染机制和事件处理提高了整体性能。 10. 响应式布局 虽然ExtJS 4.0本身不直接支持响应式设计,但开发者可以利用其强大的组件体系和布局管理...
这个"EXTJS4.0开发手册源码"包含了EXTJS4.0框架的源代码,以及与其配套的开发指南,是深入理解EXTJS4.0内部机制和进行实际项目开发的重要参考资料。 EXTJS4.0的核心特性包括组件化开发、数据绑定、可扩展性、丰富的...
extjs4.0开发人员以及学习可以下载参考
### EXTJS 4.0 视频教程 30集 关键知识点解析 #### 一、EXTJS 4.0 概述与安装配置 **1.1 EXTJS 4.0简介** EXTJS 4.0是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。它提供了一套丰富的UI组件...
EXTJS 4.0 对原生 JavaScript 功能进行了扩展,提供了 Utilities 模块中的 NativeExtensions,包括 Ext.Array、Ext.Number、Ext.Object、Ext.String、Ext.JSON、Ext.Date、Ext.Function 等。这些扩展可以帮助我们更...
ExtJs4.0入门教程,详细介绍ExtJs4.0。
### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新...
ExtJS4.0开发笔记
一款很好的适合Extjs4.0初学者学习的word文档,示例加上简单的标注说明,使你很快对Extjs4.0进入入门阶段,不可多得的文档,值得下载
### Extjs4.0 技术详解 #### 一、Extjs4.0 概述与获取 **Extjs4.0** 是一款强大的企业级前端框架,它可以帮助开发者快速构建复杂的用户界面,并且提供了丰富的组件和功能。对于初学者来说,理解其核心概念和基础...
标题提到的是ExtJS的4.0版本,这是一个重要的里程碑,因为它引入了许多新功能和改进,与之前的2.0和3.0版本有显著区别。 在ExtJS 4.0中,最显著的变化之一是其模型-视图-控制器(MVC)架构的增强。这个版本提供了更...
EXTJS4.0是一款强大的JavaScript框架,用于构建富客户端Web应用程序。这个视频教程配套代码主要涉及EXTJS4.0中的action类,这是EXTJS中处理服务器端交互的关键部分。在EXTJS中,action类通常指的是Ext.Ajax或Ext....
最新Extjs4.0 所有文件,含案例,帮助文档,源代码
ExtJS 4.0 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一系列强大的组件,包括日期和时间选择器,使得用户界面更加友好和交互。在标题中提到的"extjs 4.0 日期时间控件",是指ExtJS 4.0框架...
ExtJS 4.0 是一个强大的JavaScript框架,用于构建富客户端Web应用程序。它引入了全新的MVC(Model-View-Controller)设计模式,这使得应用的结构更加清晰,代码更易于管理和维护。在这个主题中,我们将深入探讨如何...
ExtJS 4.0中文学习手册、入门详解 本文为 ExtJS 4.0 的中文学习手册,旨在为初学者提供一个详细的入门指南。本手册涵盖了 ExtJS 4.0 的基础知识、环境搭建、基本使用方法等方面的内容。 1. ExtJS 4.0 的基础知识 ...
这个“Extjs4.0开发包”包含了开发人员需要的所有资源,包括库文件、示例和API文档,以便于理解和使用ExtJS 4.0。 首先,让我们深入了解ExtJS的核心概念。ExtJS基于MVC(Model-View-Controller)架构模式,这是一种...