yiminghe
- 浏览: 1466268 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
luhouxiang：
写的很不错，学习了
Extjs 模块化动态加载js实践 -
kingkongtown：
如果想改成淘宝后台那样，可以在编辑器批量上传图片呢？
kissy editor 阶段体会 -
317966578：
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug：
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩：
怎么能让浏览器不进入 文档模式的quirks模式，进入标准的
浏览器模式与文本模式
后台 树 节点 定义
menu_info
{
menu_id (0x500), // 本id
menu_parent_id (0x501), //父亲id
menu_title (0x502),
menu_action (0x503),
menu_nextId (0x504), //兄弟id
menu_isleaf (0x507), // 是否叶子节点
menu_roles (0x508)
}
关键是为了存放同级节点之间的顺序关系 ，而引入 兄弟节点 next ，这样的话，可以在处理拖放的时候，更新相应的 next 和 parent 就行了 ，没有使用 treeeditor，因为树节点的卫星数据太多了，还是window操作
后台只要处理 drop ,add ,del edit ,get 操作，返回 AsyncNode 对应数据，则ext 树自动界面变更，后台关键要维护好 链结构
/*
示例代码 ， 全部使用 全局变量(不建议)，请在产品中修改为局部变量
*/
function initTree() {
window.tree = new Ext.tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
dataUrl: 'menu/get-menus.jsp',
listeners: {
'beforemovenode': function (tree, node, oldParent, newParent, index) {
//alert(node.text + " before move from " + oldParent.text + " to " + newParent.text + " index " + index);
//操作的遮罩层
if (!window.treeLoadMask) {
window.treeLoadMask = new Ext.LoadMask(window.tree.body, {
msg: "处理中"
});
}
window.treeLoadMask.show();
var oldC = (oldParent.childNodes);
var indexI = oldC.indexOf(node);
//alert(indexI);
//(1) 拖放节点 的 下一个节点，父节点改变
var menuIdOwer = node.id;
var menuNewParentId = newParent.id;
//(2) 拖放前 拖放节点的上一个节点 的 下一个指向改变
var menuOldPreId = '';
var menuOldPreNext = '';
if (indexI != 0) {
menuOldPreId = oldC[indexI - 1].id;
}
if (indexI + 1 != oldC.length) {
menuOldPreNext = oldC[indexI + 1].id;
} else {
menuOldPreNext = 'node-1';
}
var newC = newParent.childNodes;
//(3) 拖放后 ，新的兄弟节点 指向也要改变
var menuNewNextId = '';
var menuNewPreId = '';
var menuNewPreNext = '';
if (newC.length == index) menuNewNextId = 'node-1';
else menuNewNextId = newC[index].id;
if (index != 0) {
menuNewPreId = newC[index - 1].id;
menuNewPreNext = node.id;
}
var conn = new Ext.data.Connection();
// 发送异步请求
conn.request({
// 请求地址
url: 'menu/update-menus.jsp',
method: 'post',
params: {
'menuIdOwer': menuIdOwer,
'menuNewParentId': menuNewParentId,
'menuNewNextId': menuNewNextId,
'menuOldPreId': menuOldPreId,
'menuOldPreNext': menuOldPreNext,
'menuNewPreId': menuNewPreId,
'menuNewPreNext': menuNewPreNext
},
// 指定回调函数
callback: callback
});
//回调函数
function callback(options, success, response) {
if (success) {
try {
var jsonObj = Ext.util.JSON.decode(response.responseText);
} catch(e) {}
if (jsonObj && jsonObj.success) {} else alert(response.responseText);
} else {
alert(response.responseText);
}
window.treeLoadMask.hide();
}
},
'contextmenu': function (n, ee) {
if (!window.treerowcontextmenu_) {
window.treerowcontextmenu_ = Ext.menu.MenuMgr.get({
id: 'treerowcontextmenu_-ctx',
items: [{
text: '刷新子节点',
iconCls: 'blist',
handler: function () {
if (!window.tree.getSelectionModel().getSelectedNode().leaf) window.tree.getSelectionModel().getSelectedNode().reload();
}
},
{
text: '添加标题',
iconCls: 'blist',
handler: function () {
var node = window.tree.getSelectionModel().getSelectedNode();
if (node.leaf) {
Ext.Msg.alert('禁止', '该节点不是目录');
return;
}
Ext.getCmp('add_menu_parent_id').setValue(node.id.substring(4));
var oldC = (node.childNodes);
var next_id = -1;
if (oldC && oldC.length != 0) next_id = oldC[0].id.substring(4);
Ext.getCmp('add_menu_next_id').setValue(next_id);
window.treeAddwin.cur_node = node;
node.expand(false, true, function () {
window.treeAddwin.show()
});
}
},
{
text: '修改标题',
iconCls: 'blist',
handler: function () {
var node = window.tree.getSelectionModel().getSelectedNode();
Ext.getCmp('edit_menu_id').setValue(node.id.substring(4));
Ext.getCmp('edit_menu_title').setValue(node.text);
Ext.getCmp('edit_menu_action').setValue(node.attributes.href);
Ext.getCmp('edit_menu_roles').setValue(node.attributes.menu_roles);
window.treeEditwin.curNode = node;
window.treeEditwin.show();
}
},
{
text: '删除节点',
iconCls: 'blist',
handler: function () {
//操作的遮罩层
var node = window.tree.getSelectionModel().getSelectedNode();
node.expand(false, true, function () {
if (node.firstChild || !node.parentNode) {
alert('还有子节点呢');
return;
}
if (!confirm('确认删除？')) {
return;
}
if (!window.treeLoadMask) {
window.treeLoadMask = new Ext.LoadMask(window.tree.body, {
msg: "处理中"
});
}
window.treeLoadMask.show();
var pre = node.previousSibling;
var post = node.nextSibling;
var pre_id = '';
var pre_next_id = '';
if (pre) {
pre_id = pre.id.substring(4);
if (post) pre_next_id = post.id.substring(4);
else pre_next_id = -1;
}
var conn = new Ext.data.Connection();
// 发送异步请求
conn.request({
// 请求地址
url: 'menu/del-menu.jsp',
method: 'post',
params: {
'del_menu_id': node.id.substring(4),
'pre_id': pre_id,
'pre_next_id': pre_next_id
},
// 指定回调函数
callback: callback
});
//回调函数
function callback(options, success, response) {
if (success) {
try {
var jsonObj = Ext.util.JSON.decode(response.responseText);
} catch(e) {}
if (jsonObj && jsonObj.success) {
node.parentNode.removeChild(node);
} else alert(response.responseText);
} else {
alert(response.responseText);
}
window.treeLoadMask.hide();
}
});
}
}]
});
}
window.tree.getSelectionModel().select(n);
window.treerowcontextmenu_.showAt(ee.getXY());
ee.preventDefault();
}
},
root: {
nodeType: 'async',
text: '(支持，右键,拖放)',
draggable: false,
id: 'node-1',
singleClickExpand: true,
leaf: false,
expandable: true
}
});
/*
window.treeEditer = new Ext.tree.TreeEditor(
window.tree,
{allowBlank: false});
window.treeEditer.on("complete", function(treeEditer, value, ovalue) {
//alert(value);
});
*/
window.treeAddForm = new Ext.FormPanel({
//width: 500,
//labelWidth:70,
//width: 560,
baseCls: 'x-plain',
method: 'POST',
autoHeight: true,
autoWidth: true,
bodyStyle: 'padding:0 10px 0;',
url: 'menu/add-menu.jsp',
//frame:true,
//animCollapse:true,
defaultType: 'textfield',
items: [{
xtype: 'hidden',
name: 'menu_parent_id',
id: 'add_menu_parent_id'
},
{
xtype: 'hidden',
name: 'menu_next_id',
id: 'add_menu_next_id'
},
{
fieldLabel: '标题',
allowBlank: false,
name: 'menu_title',
id: 'add_menu_title'
},
{
fieldLabel: '动作',
name: 'menu_action',
id: 'add_menu_action'
},
{
fieldLabel: '权限',
allowBlank: false,
name: 'menu_roles',
id: 'add_menu_roles'
},
{
checked: true,
fieldLabel: '类型',
xtype: 'radio',
boxLabel: '节点',
name: 'menuIsLeaf',
inputValue: '1',
id: 'add_menuIsLeaf'
},
{
fieldLabel: '',
xtype: 'radio',
labelSeparator: '',
boxLabel: '目录',
name: 'menuIsLeaf',
inputValue: '0'
}],
buttons: [{
text: '确定',
handler: function () {
if (treeAddForm.form.isValid()) {
if (!window.treeLoadMask) {
window.treeLoadMask = new Ext.LoadMask(window.tree.body, {
msg: "处理中"
});
}
window.treeLoadMask.show();
treeAddForm.form.submit({
url: 'menu/add-menu.jsp',
success: function (form, action) {
var before = null;
var oldC = (window.treeAddwin.cur_node.childNodes);
if (oldC && oldC.length != 0) before = oldC[0];
var newNode = new Ext.tree.AsyncTreeNode({
leaf: Ext.getCmp('add_menuIsLeaf').getValue() == '1',
text: Ext.getCmp('add_menu_title').getValue(),
href: Ext.getCmp('add_menu_action').getValue(),
id: 'node' + action.result.new_menu_id,
nodeType: 'async',
expandable: Ext.getCmp('add_menuIsLeaf').getValue() == '0'
});
window.treeAddwin.cur_node.insertBefore(newNode, before);
window.treeLoadMask.hide();
window.treeAddwin.hide();
},
failure: function (form, action) {
Ext.Msg.alert('失败', action.result.error);
window.treeLoadMask.hide();
window.treeAddwin.hide();
},
waitMsg: '添加中',
waitTitle: '请等待'
});
} else {}
}
}]
});
window.treeAddwin = new Ext.Window({
//width : 500,
//height : 300,
layout: 'fit',
title: '添加树结点',
//frame:true,
items: treeAddForm,
bodyStyle: 'padding:5px;',
closeAction: 'hide',
renderTo: document.body
});
window.treeEditForm = new Ext.FormPanel({
//width: 500,
//labelWidth:70,
//width: 560,
baseCls: 'x-plain',
method: 'POST',
autoHeight: true,
autoWidth: true,
bodyStyle: 'padding:0 10px 0;',
url: 'menu/edit-menu.jsp',
//frame:true,
//animCollapse:true,
defaultType: 'textfield',
items: [{
xtype: 'hidden',
name: 'edit_menu_id',
id: 'edit_menu_id'
},
{
fieldLabel: '标题',
allowBlank: false,
name: 'edit_menu_title',
id: 'edit_menu_title'
},
{
fieldLabel: '动作',
name: 'edit_menu_action',
id: 'edit_menu_action'
},
{
fieldLabel: '权限',
allowBlank: false,
name: 'edit_menu_roles',
id: 'edit_menu_roles'
}],
buttons: [{
text: '确定',
handler: function () {
if (treeEditForm.form.isValid()) {
if (!window.treeLoadMask) {
window.treeLoadMask = new Ext.LoadMask(window.tree.body, {
msg: "处理中"
});
}
window.treeLoadMask.show();
treeEditForm.form.submit({
url: 'menu/edit-menu.jsp',
success: function (form, action) {
var node = window.treeEditwin.curNode;
node.setText(Ext.getCmp('edit_menu_title').getValue());
node.attributes.menu_roles = Ext.getCmp('edit_menu_roles').getValue();
node.attributes.href = Ext.getCmp('edit_menu_action').getValue();
node.getUI().getAnchor().setAttribute('href', node.attributes.href);
window.treeLoadMask.hide();
window.treeEditwin.hide();
},
failure: function (form, action) {
Ext.Msg.alert('失败', action.result.error);
window.treeLoadMask.hide();
},
waitMsg: '添加中',
waitTitle: '请等待'
});
} else {}
}
}]
});
window.treeEditwin = new Ext.Window({
//width : 500,
//height : 300,
layout: 'fit',
title: '修改树结点',
//frame:true,
items: treeEditForm,
bodyStyle: 'padding:5px;',
closeAction: 'hide',
renderTo: document.body
});
}
分享到：
发表评论
-
Extjs 实践细节备忘 -3
2009-04-12 20:26 24301. dragdrop 继承层次 dd - ... -
Extjs 实践细节备忘 -2
2009-04-12 05:43 27511. grid 列宽问题 可以指定 每列的宽度数值 ... -
Extjs 实践细节备忘 -1
2009-04-11 01:47 2711在使用 extjs 开发 OAOP 应用中 ，除了API文档外 ... -
长字串换行问题
2009-03-01 23:10 5788很久没用过 ，textarea ... -
Extjs portal 应用初探
2009-02-24 23:09 6007近期在研究拖放的实现 ，看了看 Extjs 的 portal ... -
Extjs 模块化动态加载js实践
2009-01-09 18:12 23508前一段转载了一篇 透明加载外部 javascript ... -
Extjs 聊天窗口 -续3 用pushlet来实现
2008-12-23 22:16 16092前一篇 自己实现了http长连接 ， 很繁琐，后 ... -
Extjs 聊天窗口 -续2 - http长连接的实现
2008-12-16 00:55 13335认为长连接就是有个http请求被服务器阻塞了 ，这样的话浏览 ... -
Extjs CRUD 模板
2008-12-12 00:52 7812也算是一个总结吧，备忘，总结了一个增删改查的例子，以后要达到的 ... -
Ext 聊天窗口的实现 - 续
2008-12-02 15:13 6701<filter> <fil ... -
Ext 一个聊天窗口的设计
2008-11-10 00:26 37741.关键是要 弹性设计，自动适应浏览器 部件要: ... -
Ext.data.Store 与 GridFilters
2008-11-03 16:12 5366Store 每次 reload 会记着上次的参数，比如 pa ... -
Ext 实现 文件上传 进度显示
2008-10-24 18:15 5201利用了 ahxu-commons-fileuploadex-b ... -
Ext official doc - class-event-observer
2008-10-23 18:20 1439....ppt -
Ext 多文件上传面板扩展
2008-10-23 16:53 8380扩展了 Ext.Panel ，加入文件框列表 ，并控制删 ... -
Ext Grid 表头显示问题
2008-09-27 23:51 3343出现问题了，当 Grid div 放在 table 布局下的话 ... -
JSON marsh && unmarsh
2008-09-23 00:46 1988Ext 端用 //Encodes an Objec ... -
[extjs] formpanel 标准提交问题
2008-09-19 02:29 3337formpanel 的 标准提交 有 bug？ var ta ... -
ComboBox 传值问题
2008-09-19 00:07 5299field -> textfield->trigg ... -
Ext 2 概述
2008-09-18 01:11 2300欢迎来到Ext 2.0。 在下列各章节中，你将会接触到E ...
相关推荐
分享这个项目也能帮助其他初学者理解和掌握Ext2.0中的树形控件操作，提升他们使用这个框架的能力。 以上就是关于"ext2.0 树的增删改操作"及其相关知识的详细说明。掌握这些内容，将有助于你在构建Web应用时更熟练地...
总结来说，`Ext树例子`是关于如何使用ExtJS库中的`Ext.tree.Panel`组件来展示和操作层次化数据的一个主题。`tree1.txt`和`tree2.txt`文件提供了创建树的数据源，通过解析这些文件，我们可以构建出具有实际数据的交互...
其中，“Ext树”（Ext Tree）是ExtJS中的一个重要组件，用于展示层级结构的数据，如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先，理解Ext树的基本结构至关重要。一个Ext树由节点...
在IT领域，EXT是一个流行的JavaScript库，用于构建富客户端应用程序，尤其在Web应用开发中广泛应用。...通过这种方式，你可以构建一个动态、交互性强的EXT树控件，有效地展示和操作数据库中的层次结构数据。
在本主题中，“ext树的控制选择和撤销”指的是EXT树组件提供的功能，允许用户进行多选、单选，并支持撤销这些操作。 EXT树的核心类是`Ext.tree.TreePanel`，它提供了丰富的配置项和方法来定制和操作树形结构。控制...
1. `tree.htm`：这可能是一个包含下拉树示例的HTML文件，用于展示如何使用Ext JS创建和操作下拉树。 2. `dropTree.htm`：同样，这可能是一个与下拉树相关的HTML页面，可能包含了不同的实现或示例。 3. `MzTreeView...
下拉树（Dropdown Tree）是Ext JS中的一种特殊控件，它结合了下拉列表和树结构的功能，通常用于展示层次化的数据，并让用户从中选择一个或多个项。 下拉树的基本结构由两部分组成：一个文本框和一个关联的下拉面板...
【Ext树】是一种基于Ext JS库的图形用户界面组件，用于呈现层次结构的数据。Ext JS是一个强大的JavaScript框架，主要用于构建富客户端应用。在本案例中，“简单的ext树”是一个为初学者设计的基础教程，旨在帮助那些...
这个类扩展自`Ext.form.field.Select`，因此它具备常规下拉列表的所有特性，同时增加了树形结构的展示和操作。以下是一些关于如何使用Ext下拉列表树的关键知识点： 1. **配置项**：创建下拉列表树时，需要定义一些...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式，它扩展了基本的树视图，加入了复选框功能。 复选框树（Checked Tree）允许用户通过复选框来选择或取消选择树结构中的节点。这种...
首先，让我们了解EXT树形菜单的基本概念。EXT的TreePanel组件是实现树形结构的主要工具，它能够展示层次化的数据，通常用于导航或展现层级关系。树形菜单支持节点的展开、折叠、添加和删除，以及各种交互操作。 要...
"EXT级联选择的树形控件"是一个实现树形结构并支持级联选择的EXT组件。在实际应用中，它可以帮助用户通过树节点的选择来联动控制其他相关选项的状态。这个控件可能包含以下关键特性： 1. **树形结构**：每个节点...
在给定的标题“Ext树形菜单（我自己做的）”中，我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素，它用于展示层次结构的数据，比如文件系统、组织结构或...
Ext2.0不仅仅实现了复选框的树形菜单，而且使得在选中某个节点时，如果有子节点，那么就能够将所有的字节点全部选中，当然你也可以直接选择你希望的节点。但是，当你第一次选中某个有子节点但是子节点并没有展开的...
本文将深入探讨如何处理无限级JSON数据格式并实现动态加载，以优化EXT树的性能。 首先，我们要理解EXT树的基本结构。EXT树的每个节点都是一个`Ext.tree.Node`对象，包含ID、文本、子节点等属性。无限级树意味着树的...
从给定的文件信息中，我们可以深入探讨“ext树实例代码”这一主题，了解如何在Ext JS中详细应用tree控件。 ### 标题：ext树实例代码 #### 描述：ext中，tree控件的详细应用，实例。 ### 知识点解析： **1. Ext ...
总的来说，EXT实现动态树功能涉及到EXT TreePanel的使用、数据存储的配置、节点操作的实现以及用户交互的处理。通过深入理解和实践这些知识点，你可以创建出功能强大的动态树形视图，满足复杂的数据管理和展示需求。
这个"EXT 树形结构样例"提供了使用JSON格式返回数据类型的具体示例，帮助开发者理解如何有效地构建和操作EXT Tree。 首先，让我们深入理解EXT Tree的基本概念。EXT Tree是由节点（Nodes）组成的，每个节点可以有子...
创建一个基本的EXT树形菜单，首先需要定义一个配置对象，包含`title`（菜单标题）、`store`（存储树形数据的Store）和`rootVisible`（是否显示根节点）等属性。例如： ```javascript var treePanel = Ext.create...
在提供的`动态树例子json`文件中，可能包含了上述提到的JSON数据结构，用于演示EXT如何处理动态树及各种操作。通过实际代码示例，我们可以更深入地理解EXT动态树的操作方式。在实践中，结合EXT的API文档和示例代码，...