yiminghe
- 浏览: 1431734 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
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 23841. dragdrop 继承层次 dd - ... -
Extjs 实践细节备忘 -2
2009-04-12 05:43 27031. grid 列宽问题 可以指定 每列的宽度数值 ... -
Extjs 实践细节备忘 -1
2009-04-11 01:47 2660在使用 extjs 开发 OAOP 应用中 ，除了API文档外 ... -
长字串换行问题
2009-03-01 23:10 5692很久没用过 ，textarea ... -
Extjs portal 应用初探
2009-02-24 23:09 5951近期在研究拖放的实现 ，看了看 Extjs 的 portal ... -
Extjs 模块化动态加载js实践
2009-01-09 18:12 23373前一段转载了一篇 透明加载外部 javascript ... -
Extjs 聊天窗口 -续3 用pushlet来实现
2008-12-23 22:16 15928前一篇 自己实现了http长连接 ， 很繁琐，后 ... -
Extjs 聊天窗口 -续2 - http长连接的实现
2008-12-16 00:55 13229认为长连接就是有个http请求被服务器阻塞了 ，这样的话浏览 ... -
Extjs CRUD 模板
2008-12-12 00:52 7736也算是一个总结吧，备忘，总结了一个增删改查的例子，以后要达到的 ... -
Ext 聊天窗口的实现 - 续
2008-12-02 15:13 6603<filter> <fil ... -
Ext 一个聊天窗口的设计
2008-11-10 00:26 37241.关键是要 弹性设计，自动适应浏览器 部件要: ... -
Ext.data.Store 与 GridFilters
2008-11-03 16:12 5311Store 每次 reload 会记着上次的参数，比如 pa ... -
Ext 实现 文件上传 进度显示
2008-10-24 18:15 5122利用了 ahxu-commons-fileuploadex-b ... -
Ext official doc - class-event-observer
2008-10-23 18:20 1383....ppt -
Ext 多文件上传面板扩展
2008-10-23 16:53 8326扩展了 Ext.Panel ，加入文件框列表 ，并控制删 ... -
Ext Grid 表头显示问题
2008-09-27 23:51 3292出现问题了，当 Grid div 放在 table 布局下的话 ... -
JSON marsh && unmarsh
2008-09-23 00:46 1910Ext 端用 //Encodes an Objec ... -
[extjs] formpanel 标准提交问题
2008-09-19 02:29 3278formpanel 的 标准提交 有 bug？ var ta ... -
ComboBox 传值问题
2008-09-19 00:07 5176field -> textfield->trigg ... -
Ext 2 概述
2008-09-18 01:11 2238欢迎来到Ext 2.0。 在下列各章节中，你将会接触到E ...
相关推荐
该项目实现了树的增删改操作，还有下拉树；该项目的使用说明在压缩包中， 我也是ext的初学者，为了在以后的项目中使用，此处做已备份，希望对大家也有所帮助
Ext2.0不仅仅实现了复选框的树形菜单，而且使得在选中某个节点时，如果有子节点，那么就能够将所有的字节点全部选中，当然你也可以直接选择你希望的节点。但是，当你第一次选中某个有子节点但是子节点并没有展开的...
由于项目的需要最近在学习ext，在项目中必不可少用到了tree，并且要对tree进行增、改、删的操作。上网找了很多不错的学习资料把这些功能组织在一起。在学习ext的过程中花了不少时间，我想很多网友刚开始学习ext的...
ext 关于树目录的函数，关键对象，方法的操作说明，和相关ECLIPSE上的插件安装。
ext开发的动态树的生成，里面还有对树的各种增删改操作
一个基于Ext4.2可增删树的例子，解决了Ext不能动态改变leaf属性的问题。该树可自动判断当增删操作后，重新更新自我状态以便显示为叶节点或者非叶节点。
8.5.5. 反向操作，ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选，菜单里搞这套 8.7.4. 小把戏，定制好的菜单 8.7.5. SplitButton...
第5~9章分别讲解了ext js的事件及其应用、选择器与dom操作、数据交互、模板与组件、容器、面板、布局与视图；第10章和第11章分别详细介绍了重构后的gird和与gird同源的树；第12~16章分别讲解了表单、窗口、按钮、...
8.5.5. 反向操作，ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选，菜单里搞这套 8.7.4. 小把戏，定制好的菜单 8.7.5. SplitButton...
ext的树的实例.通过右键菜单操作树节点对数据库进行增删改查.
8.5.5. 反向操作，ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选，菜单里搞这套 8.7.4. 小把戏，定制好的菜单 8.7.5. ...
全书由一个可以引领读者快速入门的“hello world”示例开篇，紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解，最后以一...
全书由一个可以引领读者快速入门的“hello world”示例开篇，紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解，最后以一...
实现的树的增删改操作，并且添加了权重，及树节点的排列顺序， 备以后使用，同时希望能为用的的兄弟姐妹提供以下帮助，不足之处希望多多指点
7.5.11 树节点：ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器：ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
全书由一个可以引领读者快速入门的“hello world”示例开篇，紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解，最后以一...
第5~9章分别讲解了ext js的事件及其应用、选择器与dom操作、数据交互、模板与组件、容器、面板、布局与视图；第10章和第11章分别详细介绍了重构后的gird和与gird同源的树；第12~16章分别讲解了表单、窗口、按钮、...
包括布局、事件、grid的绑定（包含增删改）以及数据库分页还有表单绑定取值和dateview控件的使用，树的使用，包含拖拉，修改等操作 dll文件为extnet3.5,可自行下载黏贴到要目录下的net35文件夹里即可
例子包括对GWT-EXT的对表格，树，面板操作。对与IBATIS数据结合使用。包括客户端与服务器端，此例子在netbeans6.5下面可以正常运行 整个工程文件太大，这里只能上传源代码，如果需要整个工程的可以发邮件给我 ...
全书由一个可以引领读者快速入门的“Hello World”示例开篇，紧接着对Ext JS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解，最后一个...