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

ExtJS5学习之TreePanel

阅读更多

    花了3-4个小时整了一个有关ExtJS5的TreePanel组件的节点增删改查操作以及拖拽排序的demo,demo里仅仅是前端操作,不涉及后台代码。因为TreePanel是ExtJS里使用难度稍微大点的一个组件之一,特此写这篇文章记录一下,也希望能给那些对ExtJS同样感兴趣的童鞋们一些帮助。

    

/*****************ExtJS TreePanel面板*********************/
Ext.define("OA.view.TreePanel",{
    extend:'Ext.tree.Panel',
    alias : 'widget.mytreepanel',
    alternateClassName: ["OA.TreePanel"],
    initComponent : function(){
        Ext.apply(this,{
            title:"导航菜单",
            animate:true,
            animCollapse: true,
            autoScroll : true,
            scroll: "vertical",
            rootVisible : false,
            lines: false,
            useArrows: true,
            containerScroll: true,
            collapsed: false,
            collapsible: false,
            layout: "fit",
            border: false,
            width: 200,
            dockedItems: {
                dock : 'top',
                xtype : 'toolbar',
                items : [
                    {
                        xtype : 'button',
                        text : '刷新'
                    },
                    {
                        xtype : 'button',
                        text : '展开'
                    },
                    {
                        xtype : 'button',
                        text : '收缩'
                    }
                ]
            },
            viewConfig : {
                loadingText : "正在加载...",
                plugins: {
                    ptype: 'treeviewdragdrop'
                },
                listeners: {
                    drop: function(node, data, dropRec, dropPosition) {
                        //store.sync();
                    }
                }
            },
            store: Ext.create("OA.store.TreeStore")
        });
        this.callParent(arguments);
    }
});

 plugins: {

                    ptype: 'treeviewdragdrop'

                },
这里是给TreePanel添加拖拽插件的,从而支持通过鼠标拖拽节点实现节点排序,添加此插件仅仅是实现了前端界面上的排序效果,要达到真正的排序还是需要借助后台代码来实现的。比如拖拽后在drop事件里,去请求后台处理,具体逻辑就是把被拖拽节点从其原始父节点里删除,将其父节点设置为当前投放的节点。

/*****************ExtJS Tree数据源类*********************/
Ext.define("OA.store.TreeStore", {
    extend : "Ext.data.TreeStore",  
    requires: ['OA.util.AppUtil'],
    model: 'OA.model.TreeModel',
    singleton: false,
    root: {
        id: 0,
    	expanded: true,
        children: [
            {
                id: 1,
                text: "系统管理",
                leaf: true
            },
            {
                id: 2,
                text: "订单管理",
                leaf: true
            },
            {
                id: 3,
                text: "流程管理",
                leaf: true
            }
        ]
    },
    clearOnLoad : true, 
    nodeParam: "id"
}); 

 TreePanel的数据源类里直接定义了数据,没有从后台加载数据,为了演示方便,不想弄的太麻烦。如果想弄成从后台动态加载数据,可以配置api,比如:

proxy: {  
            type: 'ajax',  
            api: {  
                create: 'xxxxxxxxxxxxxxx/tree/add',  
                read: 'xxxxxxxxxxxxxxxxx/tree/list',  
                update: 'xxxxxxxxxxxxxxx/tree/edit',  
                destroy: 'xxxxxxxxxxxxxx/tree/delete'  
            },  
            writer: {  
                type: 'json',  
                allowSingle: false,  
                encode: true,  
                root: 'records'  
            }  
        },  

 create即添加请求,read即查询请求,update即修改请求,destory即删除请求。

分别对应各自的后台请求URL,你懂的。

/*****************ExtJS Tree数据模型类*********************/
Ext.define("OA.model.TreeModel", {
    extend : "Ext.data.Model",  
    fields : [
    	{name : "id",type : "int"},
        {name : "text",type : "string"},
        {name : "leaf",type : "boolean"},  
        {name : "expanded",type : "boolean"}
    ]
}); 

 TreePanel需要的数据模型,text即节点名称,leaf即是否为叶子节点,expanded即默认是否展开,如果你希望在节点前面加一个小图标,那么你还可以在数据模型再加一个属性iconCls,给它赋值一个css样式即可。

/********************TreePanel右键菜单***************************/
Ext.define("OA.view.TreeContextMenu",{
    extend: 'Ext.menu.Menu',
    alias : 'widget.treecontextmenu',
    alternateClassName: ["OA.TreeContextMenu"],
    initComponent: function(){
        Ext.apply(this,{
            floating :true,
            plain : true,
            floating:true,
            items :[
                {
                    itemId: 'add',
                    text : '添加'
                },
                {
                    itemId: 'edit',
                    text : '编辑'
                },
                {
                    itemId: 'delete',
                    text : '删除'
                }
            ]
        });
        this.callParent(arguments);
    }
});

 这是一个右键菜单,没什么好说的

/********************TreePanel节点数据编辑窗体*********************/
Ext.define("OA.view.TreeEditWindow",{
    extend: 'Ext.window.Window',
    alias : 'widget.treeeditwindow',
    alternateClassName: ["OA.TreeEditWindow"],
    initComponent: function(){
        Ext.apply(this,{
            title: "编辑节点",
            width: 230,
            height: 100,
            layout: "fit",
            closeAction: "hide",
            items :[
                {
                    xtype: "form",
                    defaultType: 'textfield',
                    defaults: {
                        anchor: '100%'
                    },
                    fieldDefaults: {
                        labelWidth: 60,
                        labelAlign: "left",
                        flex: 1,
                        margin: 5
                    },
                    items: [
                        {
                            xtype: "textfield",
                            name: "nodeName",
                            fieldLabel: "节点名称",
                            allowBlank: false
                        }
                    ]
                }
            ],
            buttons: [
                { xtype: "button", itemId: "ok",text: "确定"},
                { xtype: "button", itemId: "cancle", text: "取消"}
            ]
        });
        this.callParent(arguments);
    }
});

 这是一个普普通通的Window,点击菜单里的编辑,即创建窗体对象并show出来。

其实主要的事件处理逻辑都写在Controller里,代码如下:

/*******************全局应用程序控制器类******************/

//首先载入工具类
Ext.require(
    [
        'OA.util.CommonDoActionUtil'
    ]
);

Ext.define('OA.controller.AppController', {
    extend: 'Ext.app.Controller',
    requires: ['OA.util.CommonDoActionUtil'],
    //数据模型注册
    models: [
        'TreeModel'
    ],
    //视图注册
    views: ["TreePanel","TreeContextMenu","TreeEditWindow"],
    //数据源注册
    stores: [
        'TreeStore'
    ],
    init: function() {
        var id_ = 111;
        var currentRecord = null;
        this.control({
            "mytreepanel": {
                itemcontextmenu: function(_this, record, item, index, evt, eOpts) {
                    if(!this.ctxMenu) {
                        this.ctxMenu = Ext.create("OA.view.TreeContextMenu");
                    }
                    this.ctxMenu.showAt(evt.getXY());
                    //缓存当前鼠标右键选中的节点数据Name
                    currentRecord = record;
                    evt.preventDefault();
                    //evt.stopEvent();
                    _this.getSelectionModel().select(index);
                },
                containerclick: function(_this,e,eOpts) {
                    if(this.ctxMenu) {
                        this.ctxMenu.hide();
                    }
                }
            },
            "treecontextmenu > menuitem[itemId=add]": {
                click: function(item, event, eOpts) {
                    if(currentRecord) {
                        currentRecord.appendChild(
                            {
                                id: id_++,
                                "text": "测试节点_" + id_,
                                "leaf": true
                            }
                        );
                        //展开当前节点
                        currentRecord.expand();
                        //发送ajax请求到后台插入添加的节点数据,你懂的
                    }
                }
            },
            "treecontextmenu > menuitem[itemId=edit]": {
                click: function(item, event, eOpts) {
                    if(currentRecord) {
                        if(!this.editWin) {
                            this.editWin = Ext.create("OA.view.TreeEditWindow");
                        }
                        this.editWin.show();
                    }
                }
            },
            "treecontextmenu > menuitem[itemId=delete]": {
                click: function(item, event, eOpts) {
                    if(currentRecord) {
                        currentRecord.parentNode.removeChild(currentRecord);
                        currentRecord.commit();
                    }
                }
            },
            "treeeditwindow button[itemId=ok]": {
                click: function(_this, e, eOpts ) {
                    if(currentRecord) {
                        //获取表单数据
                        var formData = _this.up("treeeditwindow").down("form").getForm().getValues();
                        var nodeText = formData.nodeName;
                        //修改节点数据
                        currentRecord.set("text",nodeText);
                        currentRecord.commit();
                        //同理,发送Ajax请求到后台修改节点数据
                    }
                    //关闭窗体
                    _this.up("treeeditwindow").hide();
                }
            },
            "treeeditwindow button[itemId=cancle]": {
                click: function(_this, e, eOpts ) {
                    _this.up("treeeditwindow").hide();
                }
            }
        });
        this.commonAction = Ext.create('OA.util.CommonDoActionUtil');
    }
});

 最后效果图如下:



 

 各位看官如果还有什么疑问或者需要demo源码的,请加我QQ:7-3-6-0-3-1-3-0-5,或者加裙


 

  • 大小: 40.3 KB
  • 大小: 61.7 KB
  • 大小: 6 KB
分享到:
评论
1 楼 zf772835869 2015-03-14  
  

相关推荐

    Extjs入门教程(treePanel和GridPanel)

    在学习过程中,理解ExtJS的MVC(Model-View-Controller)架构至关重要,因为TreePanel和GridPanel都是View部分,它们的数据源(Model)和控制器(Controller)是实现功能的关键。同时,熟悉JSON格式数据的处理也是...

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

    5. **渲染问题**:在某些情况下,可能是因为TreePanel的渲染问题导致选中状态没有正确显示。确保在TreePanel完全渲染后执行重置操作。 6. **源码理解**:对于更复杂的问题,可能需要查看EXTJS的源码来找出问题所在...

    Extjs4 treePanel节点刷新JS函数

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

    ExtJS4 treepanel与girdpanel简单案例(包括MVC模式与非MVC模式)

    用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...

    Extjs做的treepanel+tab切换页

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

    ExtJS 3.4关于TreePanel的一些实例

    学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...

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

    在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...

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

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

    ExtJS_TreePanel_树的配置详细属性

    主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],

    extjs4 treepanel动态改变行高度示例

    在本文中,我们将探讨ExtJS 4框架中的TreePanel组件如何动态地改变行高。TreePanel是ExtJS中用于展示树形结构数据的组件,它通常用于显示文件系统结构、组织架构等层次化数据。动态改变行高是提高用户界面友好性和...

    无废话ExtJs 系列教程十五[树:TreePanel]

    《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...

    extjs TreePanel

    EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    5. **启用编辑**:EXTJS提供了`TreeEditor`类,用于启用树节点的编辑功能。我们需要配置编辑器,指定要编辑的字段及编辑器类型(如TextField、ComboBox等)。 6. **监听事件**:为TreePanel和TreeEditor添加事件...

    通过CSS样式来修改ExtJS:TreePanel的小图标

    在ExtJS框架中,TreePanel是一种用于展示层次结构数据的组件,它以树形结构的形式显示数据。在设计用户界面时,我们可能需要自定义TreePanel中的节点图标以增强视觉效果或传达特定的信息。本篇将详细介绍如何通过CSS...

    extjs4中panel的accordion布局以及treepanel导航

    在EXTJS4中,Panel和TreePanel是两个非常重要的组件,它们在构建用户界面时扮演着核心角色。本文将深入探讨Panel的accordion布局以及TreePanel的动态导航功能,帮助开发者更好地理解和运用这些特性。 首先,让我们...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法...

    JavaScript的ExtJS框架中数面板TreePanel的用法实例解析_.docx

    在JavaScript的ExtJS框架中,TreePanel是一种强大的组件,它用于展示树形结构的数据,尤其适合处理JSON格式的信息。TreePanel允许用户以交互的方式浏览层级化的数据,这在很多应用场景中,如文件系统、组织结构或者...

    Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...

Global site tag (gtag.js) - Google Analytics