承接着上一篇，在TreePanel的节点上应用CellEditor插件对节点进行修改，上一篇《ExtJS5学习之TreePanel》中节点数据修改是通过弹出一个Window实现的，这次我们来试试使用CellEditor插件来完成同样的功能，关键代码如下：
/*****************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.plugins = [{"ptype": "cellediting"}];
this.columns = [
{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
editor: {
xtype: 'textfield',
selectOnFocus: true,
validator: function(value){
value = Ext.String.trim(value);
return value.length < 1 ? this.blankText : true;
}
}
},
{
xtype: 'actioncolumn',
width: 24,
icon: 'delete.png',
iconCls: 'x-hidden',
tooltip: 'Delete'
}
];
this.callParent(arguments);
}
});
关键点1在：
this.plugins = [{"ptype": "cellediting"}];
这里表示添加celleditor插件，添加了该插件之后，双击树节点可以对节点名称进行修改，默认该插件是双击进入编辑模式，当然你也可以通过修改clickToEdit值来改变这种默认行为，比如
this.plugins = [{"ptype": "cellediting","clickToEdit":1}];
"clickToEdit":1即表示点击节点一次就可进入编辑模式，默认该值为2.
关键点2在：
this.columns = [
{
xtype: 'treecolumn',
dataIndex: 'text',
flex:4,
width: 100,
editor: {
xtype: 'textfield',
selectOnFocus: true,
allowBlank: false,
allowOnlyWhitespace: false
}
},
{
xtype: 'actioncolumn',
itemId: "deleteCol",
flex:1,
icon: 'delete.png',
tooltip: 'Delete',
iconCls: 'x-hidden'
}
];
这里定义了两列，一列用于显示节点数据，一列用于显示操作按钮或者说操作图标即xtype:"actioncolumn"。flex:1这里的flex表示定义这两列的宽度比例，如果一个flex:4,一个flex:1即表示这两列的显示宽度比例是4：1，你懂的。icon是显示图标资源文件的路径，tooltip是鼠标放在图标上时弹出的文字提示，iconCls是当前图标应用的CSS类样式，x-hidden是我自定义的css类样式，定义在index.jsp里
<style type="text/css">
.x-hidden {
visibility: hidden !important
}
</style>
visibility: hidden !important表示隐藏不显示
剩下的就是监听事件做相应的逻辑处理，事件监听写在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);
},
//鼠标进入时显示ActionColumn
itemmouseenter: function(view, list, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.x-action-col-icon', node);
if(view.getRecord(node).get('id') != 0) {
Ext.each(icons, function(icon){
Ext.get(icon).removeCls('x-hidden');
});
}
},
//鼠标离开时隐藏ActionColumn
itemmouseleave: function(view, list, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.x-action-col-icon', node);
Ext.each(icons, function(icon){
Ext.get(icon).addCls('x-hidden');
});
},
containerclick: function(_this,e,eOpts) {
if(this.ctxMenu) {
this.ctxMenu.hide();
}
},
//编辑完成后触发
edit: function(editor,e) {
e.record.commit();
console.log(e.record.get("text"));
}
},
"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();
}
},
//点击删除小图标时删除当前树节点
"actioncolumn[itemId=deleteCol]": {
click: function(gridView, rowIndex, colIndex, column, e, record) {
//获取当前删除小图标所处行的树节点的数据
var model = gridView.getRecord(gridView.findTargetByEvent(e));
console.log(model.parentNode);
model.parentNode.removeChild(model);
model.commit();
//这里是演示下在当前事件里如何获取当前TreePanel对象
console.log(gridView.up("mytreepanel"));
//gridView.up("mytreepanel").deleteNode(model);
}
}
});
this.commonAction = Ext.create('OA.util.CommonDoActionUtil');
}
});
在上一篇的基础上多监听了几个事件，比较重要的就是如何编写组件查询表达式，；类似于JQuery的选择器表达式，懂JQuery的话，应该会举一反三。下面对一些重点进行说明：
//编辑完成后触发
edit: function(editor,e) {
e.record.commit();
console.log(e.record.get("text"));
}
这里是监听cellEditor插件在退出编辑模式完成编辑时触发的动作，首先通过e.record获取到你修改后新的节点名称数据，e.record是一个Ext.data.Model类的对象，你可以通过e.record.get("属性名")来获取相应属性值，有了修改后的数据，剩下就是把数据通过ajax方式发送到后台更新到数据库，demo里并没有提供跟后台交互的示例代码，留给你们自己去完成。
//点击删除小图标时删除当前树节点
"actioncolumn[itemId=deleteCol]": {
click: function(gridView, rowIndex, colIndex, column, e, record) {
//获取当前删除小图标所处行的树节点的数据
var model = gridView.getRecord(gridView.findTargetByEvent(e));
console.log(model.parentNode);
model.parentNode.removeChild(model);
model.commit();
//这里是演示下在当前事件里如何获取当前TreePanel对象
console.log(gridView.up("mytreepanel"));
//gridView.up("mytreepanel").deleteNode(model);
}
}
这里是监听删除小图标的单击事件，点击后删除当前树节点，代码逻辑里面有详细注释，就不再啰嗦了。同理，这里也并没有与后台交互的代码，实际可能需要在这里发送Ajax请求到后台去删除该节点数据的，你懂的哈！
//鼠标进入时显示ActionColumn
itemmouseenter: function(view, list, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.x-action-col-icon', node);
if(view.getRecord(node).get('id') != 0) {
Ext.each(icons, function(icon){
Ext.get(icon).removeCls('x-hidden');
});
}
},
//鼠标离开时隐藏ActionColumn
itemmouseleave: function(view, list, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.x-action-col-icon', node);
Ext.each(icons, function(icon){
Ext.get(icon).addCls('x-hidden');
});
},
这两处是实现鼠标悬浮进入时显示删除小图标，鼠标离开时隐藏删除小图标，这个仅仅是玩了一个JS效果，没什么实际用途，可加可不加。
最后照例弄几张效果图，不然光代码不够形象，
如果你仍有什么疑问或者你需要demo源代码，请加我ＱＱ：7-3-6-0-3-1-3-0-5,或者加裙一起交流学习：
相关推荐
在学习过程中，理解ExtJS的MVC（Model-View-Controller）架构至关重要，因为TreePanel和GridPanel都是View部分，它们的数据源（Model）和控制器（Controller）是实现功能的关键。同时，熟悉JSON格式数据的处理也是...
在EXTJS开发中，TreePanel是用于展示层级结构数据的组件，它经常被用来构建文件系统或者组织结构等。在处理TreePanel时，我们可能会遇到一个常见问题：当尝试使用MultiSelectionModel（多选模型）重置选中的节点时，...
用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. ...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
在EXTJS这个强大的JavaScript框架中，`Ext.Panel`和`TreePanel`是两个非常重要的组件，它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据...
在本篇文章中，我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中（checked）的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...
主要方法： 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添加事件...
在EXTJS4中，Panel和TreePanel是两个非常重要的组件，它们在构建用户界面时扮演着核心角色。本文将深入探讨Panel的accordion布局以及TreePanel的动态导航功能，帮助开发者更好地理解和运用这些特性。 首先，让我们...
在ExtJS框架中，TreePanel是一种用于展示层次结构数据的组件，它以树形结构的形式显示数据。在设计用户界面时，我们可能需要自定义TreePanel中的节点图标以增强视觉效果或传达特定的信息。本篇将详细介绍如何通过CSS...
Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树（Checkbox tree） Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法...
在JavaScript的ExtJS框架中，TreePanel是一种强大的组件，它用于展示树形结构的数据，尤其适合处理JSON格式的信息。TreePanel允许用户以交互的方式浏览层级化的数据，这在很多应用场景中，如文件系统、组织结构或者...
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码，主要是因为 ExtJS4 配备了一类新的系统，不向后兼容...ExtJS3 升级到 ExtJS4 需要修改大量代码，需要我们重新学习和适应 ExtJS4 的新特性和变化。