`
cnyangqi
  • 浏览: 112633 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Ext JS 4.0 Tree实战(完美解决TreeNode动态刷新问题)

阅读更多
由于个人时间问题,且鉴于上次Grid实战发布经验,完整代码我就不放了,只发布有价值的代码片段。节省大家时间。

本文只描述技术要点:
1,上JSON
[{"pkid":177,"text":"1","mkljdz":"1","bj":1,"xh":1,"fjmk":"3","cjxgrq":"May 17, 2011 7:47:50 PM","zmks":0,"lb":"0","jz":"1","leaf":true},{"pkid":178,"text":"2","mkljdz":"2","bj":1,"xh":2,"fjmk":"3","cjxgrq":"May 17, 2011 7:48:07 PM","zmks":0,"lb":"0","jz":"2","leaf":true},{"pkid":179,"text":"3","mkljdz":"3","bj":1,"xh":3,"fjmk":"3","cjxgrq":"May 17, 2011 7:48:38 PM","zmks":0,"lb":"0","jz":"3","leaf":true},{"pkid":180,"text":"4","mkljdz":"4","bj":1,"xh":4,"fjmk":"3","cjxgrq":"May 17, 2011 7:49:37 PM","zmks":0,"lb":"0","jz":"4","leaf":true},{"pkid":181,"text":"5","mkljdz":"5","bj":1,"xh":5,"fjmk":"3","cjxgrq":"May 17, 2011 7:51:20 PM","zmks":0,"lb":"0","jz":"5","leaf":true}]

必要字段:pkid text fjmk leaf
说明:Tree的JSON是数组格式的,pkid的值是节点的id、text的值是节点的名字、fjmk的值为父级模块的pkid、leaf表示是否为leaf节点。

2,技术要点
很多朋友不知道4的树节点视图如何动态更新,上核心代码段
listeners : {
itemclick : function(view, rec, node) {//树节点单击时候记录下view、record、node
View = view;
Rec = rec;
Node = node;
view.expand(rec);//单击展开子节点
}

//这段代码很关键,与ExtJS3刷新node的方法完全不一样
Rec.removeAll();//清空当前节点下的子节点
xtmkTreeStore.load({
node : Rec,//读取当前节点
callback : function() {
View.refresh();//刷新树视图!
}
});


最后,goodluck everyone!
分享到:
评论
11 楼 jiajiafucs 2011-06-03  
不错,最近也在看ext4
10 楼 cnyangqi 2011-05-25  
zgxzowen 写道
JS是在是太灵活了,因此导致ext写出来的东西千差万别,借用我们架构师的话,用不好Ext将会导致项目工期等各方面都受影响,但是用的好,无论维护还有易用性上都能提高几个档次,不适用于公网项目,做企业级应用还是不错的选择,Ext的理论特别好,封装,继承,我们现在都用Ext的继承机制来实现业务,最开始感觉他很难用,不好写,api繁多,用时间长了,就会有自己的体会

是的,给我的感觉目前应用初期就是不断地推到重建代码。
9 楼 zgxzowen 2011-05-24  
JS是在是太灵活了,因此导致ext写出来的东西千差万别,借用我们架构师的话,用不好Ext将会导致项目工期等各方面都受影响,但是用的好,无论维护还有易用性上都能提高几个档次,不适用于公网项目,做企业级应用还是不错的选择,Ext的理论特别好,封装,继承,我们现在都用Ext的继承机制来实现业务,最开始感觉他很难用,不好写,api繁多,用时间长了,就会有自己的体会
8 楼 cnyangqi 2011-05-23  
sebatinsky 写道
呵呵,反正我用的一个是相当杯具。

广域网项目?
7 楼 cnyangqi 2011-05-23  
Java_大猫 写道
erikchang 写道
ext太重量级了,全部用它,你会发现噩梦正在发生...

同意。曾经的一个项目就是。彻底杯具

广域网项目?
6 楼 cnyangqi 2011-05-23  
erikchang 写道
ext太重量级了,全部用它,你会发现噩梦正在发生...

个人其实也对ExtJS。。。但决定不了什么。。。所以
5 楼 sebatinsky 2011-05-23  
呵呵,反正我用的一个是相当杯具。
4 楼 Java_大猫 2011-05-23  
erikchang 写道
ext太重量级了,全部用它,你会发现噩梦正在发生...

同意。曾经的一个项目就是。彻底杯具
3 楼 erikchang 2011-05-22  
ext太重量级了,全部用它,你会发现噩梦正在发生...
2 楼 cnyangqi 2011-05-22  
redish 写道
和3.0有什么不同吗?


3.0刷新node即可。
1 楼 redish 2011-05-22  
和3.0有什么不同吗?

相关推荐

    ext TREE

    【标题】"ext TREE"指的是在软件开发领域中,尤其是Java Web开发中,EXT JS库中的Tree组件。EXT JS是一个强大的JavaScript用户界面库,用于构建富客户端应用。Tree组件是EXT JS中的一个重要部分,它允许开发者创建可...

    Ext TreePanel Checked Ext复选框树

    在IT领域,特别是前端开发中,`Ext JS`是一个广泛使用的JavaScript库,它提供了一整套组件和工具,用于构建富交互式的Web应用程序。`TreePanel`是`Ext JS`中的一个关键组件,用于展示层次结构的数据,就像操作系统中...

    Ext.tree.TreeLoader附带封装的json类

    `Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,非常适合于在服务器和客户端之间传输数据。我们将通过实例...

    JSP EXT 遍历 TREE

    在IT行业中,JSP(JavaServer Pages)是一种用于创建动态网页的技术,而EXT是一个流行的JavaScript框架,主要用于构建富客户端应用程序。EXT提供了丰富的组件库,其中就包括TREE组件,它允许展示和操作数据结构为树...

    Ext 中的Tree实现不同节点不同的右键菜单

    `Tree`是通过`TreeNode`对象来表示每一个层级节点的,每个节点都可以有自己的属性和行为。在`Tree`中,我们可以定义节点的`contextMenu`属性,这将关联一个右键点击事件。当用户在特定节点上右键点击时,关联的菜单...

    EXT--tree

    标题“EXT--tree”暗示了我们讨论的主题与EXT.js库中的树形组件有关。EXT.js是一个流行的JavaScript UI框架,用于构建富客户端应用。在EXT.js中,“tree”通常指的是TreePanel,它允许用户以层级结构展示数据,常...

    Ext Tree示例

    Ext Tree 是 Ext JS 库中的一个组件,它用于在用户界面上展示层次化的数据结构,类似于文件系统的目录结构。在给定的资源中,我们有多个 HTML 文件(tree2.html, tres.html, s1.html, tree.html)和 JavaScript 文件...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    EXT tree学习 参考

    EXT JS是一个强大的JavaScript UI框架,提供了一系列的可复用组件,EXT Tree就是其中之一,它可以帮助开发者构建功能丰富的树形视图,常用于文件系统、组织结构、导航菜单等场景。 EXT Tree的核心特性包括: 1. **...

    关于extjs ext.tree

    你可以查看`ext-all.js`或`ext-all-debug.js`文件中关于TreePanel、TreeNode和TreeStore的相关代码,了解其内部实现机制。 7. **扩展与工具**: - 使用`Ext.tree.Column`可以为TreePanel添加列,展示更多节点信息...

    javascript 原生tree

    JavaScript原生Tree是一种在Web开发中用于数据组织和展示的数据结构。它通常由节点组成,每个节点可以有零个或多个子节点,形成一个层次化的结构。在JavaScript中实现这样的树形结构,需要掌握基本的数据结构知识...

    Ext JS 深入浅出 树形结构

    Ext JS 是一个强大的JavaScript框架,主要用于构建富客户端应用。它提供了丰富的组件库,其中包括用于创建树形结构(Tree)的组件。在深入讲解树形结构之前,先了解一下Ext JS的基本概念。 Ext JS 的核心是其组件...

    Ext4tree与后台交互

    Ext4 是一个流行的JavaScript框架,主要用于构建富客户端应用程序,尤其是数据驱动的Web界面。它提供了丰富的组件库,其中包括TreePanel,这是一个用于展示层次结构数据的控件。在"Ext4 tree与后台交互"这个主题中,...

    Ext_Tree属性方法

    `Ext.tree.TreeNode`是用于表示树形结构中的每个节点的对象,它扩展了`Ext.data.Node`。 - **text**:节点的文本内容。 - **qtip**:节点的提示信息。 - **icon**:节点的图标路径。 - **iconCls**:节点的图标样式...

    磁盘目录树(EXT-js)

    EXT-js的API文档和社区资源非常丰富,可以帮助开发者解决在实现过程中遇到的问题。 总之,“磁盘目录树(EXT-js)”是一个利用EXT-js的强大功能来呈现和操作文件系统目录的应用,它结合了异步加载、CheckBox选择、...

    在VS下利用Ext4.2的TreePanel的简单demo

    在Visual Studio(VS)开发环境中,使用ExtJS的TreePanel组件可以创建动态的、交互式的树形结构数据展示。本文将深入探讨如何基于Ext4.2版本实现一个简单的TreePanel demo,结合数据库进行后台的数据操作,包括增、...

    jsTree asp.net c# jason demo 控件 案例

    在ASP.NET项目中,jsTree可以通过C#代码动态生成JSON数据,然后在前端展示为树形结构。C#作为.NET框架的一部分,提供了强大的数据处理和序列化能力,能够方便地将数据库或其他数据结构转换为JSON格式,供jsTree使用...

    exxtjs4.0中树的用法

    在EXTJS 4.0中,相比于之前的版本,树形组件(Tree)的用法有了显著的变化。EXTJS 4引入了大量的改进和重构,包括命名规范的调整、组件的继承结构变化以及数据存储结构的更新,这使得EXTJS 4在功能和性能上都有所...

    TreeNode多级目录显示

    System.Windows.Forms.TreeNode treeRootNode = new System.Windows.Forms.TreeNode(); //根结点定义 System.Windows.Forms.TreeNode[] treeNode = new System.Windows.Forms.TreeNode[len]; //二级目录定义 ...

    gae报错:javax.swing.tree.TreeNode is a restricted class的解决办法

    标题 "gae报错:javax.swing.tree.TreeNode is a restricted class的解决办法" 指出的是在Google App Engine (GAE) 平台上遇到的一个特定错误。GAE是一个基于Java或Python等语言的云服务平台,它对上传的代码有一些...

Global site tag (gtag.js) - Google Analytics