`
Justgin
  • 浏览: 7930 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一个Ext动态TreePanel构件

    博客分类:
  • Ext
阅读更多

 

  1. 业务需求:软件开发过程中经常遇到将业务数据在页面上加载为树形方式,以展现为层次型信息。
  2. 需求分析
    1. 可通过后台动态构件tree上所展展现的数据,前台声明一个TreePanel对象后,可以将请求后返回的数据加载到对象上;
    2. TreePanel可以指定请求的Url,也可以指定异步或同步的加载方式
    3. TreePanel可以指定是否显示复选框,以完成复选或单选功能
    4. 提供获取当前选择的节点的功能
  3. 程序设计
    1. 首先,新增斩TreePanel继承自Ext.tree.TreePanel,以保证保留原来的TreePanel的同时,扩展新需求:
justgin.bap.TreePanel = Ext.extend(Ext.tree.TreePanel, {
    title: '树',
    rootText: '根节点',
    rootId: '',
    manageAble: true,
    autoScroll: true,
    url: '/Domain/DynamicTreeAjax.do', //查询数据的地址
    urlParams: {},
    serviceUrl: '', //外部接口,查询数据的serviceUrl
    checkBox: false  //指定是否有复选框
}); 

   b.然后,扩展initComponent方法,以实现动态加载数据的功能:

      

initComponent: function() {
        var me = this
        this.addEvents(
            "beforeloadnode",
            "loadnode"
        )

        //设置根节点
        var rootConfig = {
            text: me.rootText,
            id: me.rootId,
            draggable: false,
            leaf: false
        }

        this.root = new Ext.tree.AsyncTreeNode(rootConfig)

        if(me.url != '') {
            this.loader = new Ext.tree.TreeLoader({
            dataUrl: me.url,
            params: Ext.apply(me.urlParams, {serviceUrl: me.serviceUrl}),
            listeners: {
                'beforeload': function(l, n) {
                    me.fireEvent('beforeloadnode', n, me)
                    l.baseParams = Ext.apply(me.urlParams, {serviceUrl: me.serviceUrl})
                },
                'load': function(l, n) {  
                        me.fireEvent('loadnode', n, me)
                        l.baseParams = Ext.apply(me.urlParams, {serviceUrl: me.serviceUrl})
                }
            }
        });

        if(me.checkBox) {
                Ext.apply(this.loader, {baseAttrs: {uiProvider : Ext.ux.TreeCheckNodeUI}});
        }
        }

        me.on("render", function(me) {
                me.getRootNode().expand(false)
        }),

        justgin.bap.TreePanel.superclass.initComponent.call(this);

    }
 

    c.扩展方法getSelected(),返回单选时,当前选中的节点

     

getSelected: function() {
       var nd = this.getSelectionModel().getSelectedNode();
       return nd;
} 

   d.扩展方法getChecked(),返回有复选框时,选中的节点的集合(TODO

   e.后台返回数据的格式为Ext.tree.Panel可接受的josn格式,如下格式所示,目前许多开源的jsonUtility都提供json格式的封装,后面会专门开篇介绍本人对业务对象与json数据之间转换的设计。

     

[{
    "text": "adapter",
    "id": "source\/adapter",
    "cls": "folder"
}, {
    "text": "dd",
    "id": "source\/dd",
    "cls": "folder"
}, {
    "text": "debug.js",
    "id": "source\/debug.js",
    "leaf": true,
    "cls": "file"
}]

     

  4.使用方法

     

var tree = new Beidasoft.Bap.TreePanel({
   id: 'lefttree',
   title: 'SampleTreePanel',
   border: false,
   serviceUrl: 'ExtObjectData/extTree', //此处请求的是后台Bean中的一个方法,返回能接受的json格式
   renderTo: 'divtest'
});

     

分享到:
评论

相关推荐

    Ext TreePanel Checked Ext复选框树

    `TreePanel`是`Ext JS`中的一个关键组件,用于展示层次结构的数据,就像操作系统中的文件系统浏览器。在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,...

    Ext.net TreePanel的Checkbox操作及父子联动

    在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,通常用于构建树形目录或层级关系的界面。在这个特定的场景中,我们关注的是TreePanel中的Checkbox功能以及父子节点间的联动效果。 ...

    Ext TreePanel

    【Ext TreePanel】是Ext JS库中的一个组件,主要用于展示层次结构的数据,比如文件系统、组织结构等。TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel...

    ext.net Menu + TreePanel

    它是一个强大的工具集,提供了多种组件,包括Menu(菜单)和TreePanel(树形面板),这两个组件在Web应用中广泛用于导航和数据组织。 Menu组件在Ext.NET中扮演着重要的角色,它为用户提供了一种易于操作的下拉菜单...

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

    首先,`Ext.Panel`是一个可配置的容器,它可以包含其他组件,如按钮、表格、表单等。它提供了丰富的布局管理,如`fit`布局(适合填充其父容器)、`border`布局(带有边框)等。动态加载本地数据到`Ext.Panel`通常...

    Ext.net TreePanel的Checkbox操作及父子节点联动(修正)

    在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,例如文件系统、组织结构等。本文将详细讲解如何实现TreePanel中的Checkbox操作以及父子节点间的联动效果,特别是针对之前存在的Bug进行...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    例如,我们可以在每个TabPanel的标签页中放置一个TreePanel,以呈现不同分类的树状数据。当用户点击TreePanel中的节点时,可以触发事件,切换到对应的TabPanel标签页,或者在当前标签页内更新内容。这样的设计使得...

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

    本文将深入探讨如何基于Ext4.2版本实现一个简单的TreePanel demo,结合数据库进行后台的数据操作,包括增、删、改、查功能。这对于初学者来说是一个很好的起点,能够帮助理解如何将前端UI与后端数据服务相结合。 ...

    treepanel 和 tabpanel 完整

    `TreePanel`是Ext JS中的一个控件,它用于展示树形结构的数据。这种数据结构通常用于表示文件系统、组织架构或任何有层级关系的信息。`TreePanel`的主要特点包括: 1. **节点层次**:每个`TreePanel`都可以包含多个...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    其中,TreePanel是ExtJS中非常常用的一个组件,用于展示具有层次结构的数据。 ### 二、TreePanel组件详解 #### 1. TreePanel基本概念 TreePanel是一个显示层次数据的组件,通常用于导航或组织结构展示。它可以...

    Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

    在处理TreePanel时,我们可能会遇到一个常见问题:当尝试使用MultiSelectionModel(多选模型)重置选中的节点时,发现重置操作并未生效。这个问题可能源于多种原因,本文将深入探讨这个问题及其解决方案。 首先,...

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

    Ext3.2的TreePanel和GridPanel的分页与Hibernate的分页功能的影射

    而TreePanel的更新也是一个比较常见的问题,当我们点击测试按钮时,TreePanel会请求远程服务器的资源,重新刷新树,从而达到动态更新树的效果,这在实际开发中是非常有用的。 阅读对象:本中心需要使用Ext框架开发的...

    Extjs 加载数据库 生成tree

    通过java 访问数据库而生成节点 子节点的 ID 与 父节点的关系为“父节点id_子节点id”此id为数据库中的id 同理“父节点id_子节点id_子子节点id”,因此加载树...再调用不能的sql 语句 因为每个节点的数据都不在一个表中

    DWR方式动态加载EXT.Tree

    EXT TreePanel 是EXT JS库中的一个组件,它用于展示层次结构的数据,通常以树形结构显示,广泛应用于文件系统、组织结构或者菜单的展示。而DWR则是一种允许JavaScript在浏览器端与服务器端进行异步通信的技术,它...

    EXT动态树工程,例子学习

    在"EXT动态树工程,例子学习"中,我们将关注EXT中的一个重要组件——动态树。 动态树是一种数据可视化工具,它允许用户以树状结构展示数据。在EXT中,动态树常用于展示层级关系的数据,如文件系统、组织结构或者...

    EXT2.0动态树,分页!

    ”这个项目中,我们可以看到EXT2.0如何被用来创建一个后台管理系统的动态树结构,并结合了分页功能,以提高用户体验和系统性能。 动态树结构是EXT2.0中的一个重要特性,它允许用户交互地展开和折叠节点,以显示或...

    Extjs做的treepanel+tab切换页

    在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...

Global site tag (gtag.js) - Google Analytics