花了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,或者加裙
相关推荐
在学习过程中,理解ExtJS的MVC(Model-View-Controller)架构至关重要,因为TreePanel和GridPanel都是View部分,它们的数据源(Model)和控制器(Controller)是实现功能的关键。同时,熟悉JSON格式数据的处理也是...
5. **渲染问题**:在某些情况下,可能是因为TreePanel的渲染问题导致选中状态没有正确显示。确保在TreePanel完全渲染后执行重置操作。 6. **源码理解**:对于更复杂的问题,可能需要查看EXTJS的源码来找出问题所在...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...
在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
在本文中,我们将探讨ExtJS 4框架中的TreePanel组件如何动态地改变行高。TreePanel是ExtJS中用于展示树形结构数据的组件,它通常用于显示文件系统结构、组织架构等层次化数据。动态改变行高是提高用户界面友好性和...
《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...
EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...
5. **启用编辑**:EXTJS提供了`TreeEditor`类,用于启用树节点的编辑功能。我们需要配置编辑器,指定要编辑的字段及编辑器类型(如TextField、ComboBox等)。 6. **监听事件**:为TreePanel和TreeEditor添加事件...
在ExtJS框架中,TreePanel是一种用于展示层次结构数据的组件,它以树形结构的形式显示数据。在设计用户界面时,我们可能需要自定义TreePanel中的节点图标以增强视觉效果或传达特定的信息。本篇将详细介绍如何通过CSS...
在EXTJS4中,Panel和TreePanel是两个非常重要的组件,它们在构建用户界面时扮演着核心角色。本文将深入探讨Panel的accordion布局以及TreePanel的动态导航功能,帮助开发者更好地理解和运用这些特性。 首先,让我们...
Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法...
在JavaScript的ExtJS框架中,TreePanel是一种强大的组件,它用于展示树形结构的数据,尤其适合处理JSON格式的信息。TreePanel允许用户以交互的方式浏览层级化的数据,这在很多应用场景中,如文件系统、组织结构或者...
TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...