对EXTJS的控件之间DD的相关总结(一)
2009-02-23 20:26
218 查看
近来由于项目用到EXT,觉得里面的DD用起来很有意思,研究了一段时间源码,也总结了一些常用控件之间的用法,这方面网上的资料比较少,当时自己也走了一些弯路,现在暂时总结一下
ext提供的Tree和Grid本身就有拖拽的功能,使用过TreePanel或者GridPanel的人都知道,对于要想让tree可以拖拽,那么必须为tree的enableDD属性设置为true。
1,tree到grid
panel.dropZone = new Ext.dd.DropZone(panel.getEl(), {ddGroup:"SendTreeDDGroup", dropNotAllowed:"x-dd-drop-delete", getTargetFromEvent:function (e) {
return e.getTarget("");
}, onNodeOver:function (nodedate, dragsource, e, data) {
if (!data.node) {
if (data.personData.name) {
// 显示"nodrop"图标
return "x-dd-drop-nodrop";
} else {
if (data.personData.html) {
// 显示删除图标
}
}
return this.dropNotAllowed;
}
if (data.node.attributes.leaf && SendGrid.store.findBy(function (record, id) {
return id == data.node.id;
}) == -1) {
return "x-dd-drop-ok-add";
} else {
return "x-dd-drop-nodrop";
}
return this.dropNotAllowed;
}, onNodeDrop:function (nodedate, dragsource, e, data) {
if (data.node.attributes.leaf == true) {
SendGrid.store.add(new Ext.data.Record({dept:data.node.attributes.dept, faxnum:data.node.attributes.faxnum, faxtype:data.node.parentNode.attributes.dept, faxtel:data.node.attributes.faxnum}, data.node.id));
}
return false;
}});
2,grid到tree的例子
beforenodedrop: function(dropEvent) {
var node = dropEvent.target; // 目标结点
var data = dropEvent.data; // 拖拽的数据
var point = dropEvent.point; // 拖拽到目标结点的位置
// 如果data.node为空,则不是tree本身的拖拽,而是从grid到tree的拖拽,需要处理
if(!data.node) {
switch(point) {
case 'append':
// 添加时,目标结点为node,子结点设为空
ddFn(node, null, data.selections);
break;
case 'above':
// 插入到node之上,目标结点为node的parentNode,子结点为node
ddFn(node.parentNode, node, data.selections);
break;
case 'below':
// 插入到node之下,目标结点为node的parentNode,子结点为node的nextSibling
ddFn(node.parentNode, node.nextSibling, data.selections);
break;
}
}
其中ddFn方法如下
var ddFn= function(node, refNode, selections) {
for(var i = 0; i < selections.length; i ++) {
var record = selections[i];
node.insertBefore(new Tree.TreeNode({
text: record.get('text'),
id: record.get('id'),
leaf: record.get('leaf'),
cls: record.get('cls')
}), refNode);
}
}
当然ddFn里面要根据需要判断是否有重复id等,有重复则不再drop
ext提供的Tree和Grid本身就有拖拽的功能,使用过TreePanel或者GridPanel的人都知道,对于要想让tree可以拖拽,那么必须为tree的enableDD属性设置为true。
1,tree到grid
panel.dropZone = new Ext.dd.DropZone(panel.getEl(), {ddGroup:"SendTreeDDGroup", dropNotAllowed:"x-dd-drop-delete", getTargetFromEvent:function (e) {
return e.getTarget("");
}, onNodeOver:function (nodedate, dragsource, e, data) {
if (!data.node) {
if (data.personData.name) {
// 显示"nodrop"图标
return "x-dd-drop-nodrop";
} else {
if (data.personData.html) {
// 显示删除图标
}
}
return this.dropNotAllowed;
}
if (data.node.attributes.leaf && SendGrid.store.findBy(function (record, id) {
return id == data.node.id;
}) == -1) {
return "x-dd-drop-ok-add";
} else {
return "x-dd-drop-nodrop";
}
return this.dropNotAllowed;
}, onNodeDrop:function (nodedate, dragsource, e, data) {
if (data.node.attributes.leaf == true) {
SendGrid.store.add(new Ext.data.Record({dept:data.node.attributes.dept, faxnum:data.node.attributes.faxnum, faxtype:data.node.parentNode.attributes.dept, faxtel:data.node.attributes.faxnum}, data.node.id));
}
return false;
}});
2,grid到tree的例子
beforenodedrop: function(dropEvent) {
var node = dropEvent.target; // 目标结点
var data = dropEvent.data; // 拖拽的数据
var point = dropEvent.point; // 拖拽到目标结点的位置
// 如果data.node为空,则不是tree本身的拖拽,而是从grid到tree的拖拽,需要处理
if(!data.node) {
switch(point) {
case 'append':
// 添加时,目标结点为node,子结点设为空
ddFn(node, null, data.selections);
break;
case 'above':
// 插入到node之上,目标结点为node的parentNode,子结点为node
ddFn(node.parentNode, node, data.selections);
break;
case 'below':
// 插入到node之下,目标结点为node的parentNode,子结点为node的nextSibling
ddFn(node.parentNode, node.nextSibling, data.selections);
break;
}
}
其中ddFn方法如下
var ddFn= function(node, refNode, selections) {
for(var i = 0; i < selections.length; i ++) {
var record = selections[i];
node.insertBefore(new Tree.TreeNode({
text: record.get('text'),
id: record.get('id'),
leaf: record.get('leaf'),
cls: record.get('cls')
}), refNode);
}
}
当然ddFn里面要根据需要判断是否有重复id等,有重复则不再drop
相关文章推荐
- QT界面(控件)相关设计的一些技巧总结
- DataGridView控件相关使用总结
- Extjs控件属性总结
- 图片数组之间的关系,还有python相关库的总结
- select、poll、epoll之间的区别总结及相关资料整理
- 学习总结之EXTJS相关了解和问题解决篇
- QT界面(控件)相关设计的一些技巧总结
- ExtJS基础知识总结:自定义日历和ComboBox控件(二)
- 关于FileUpload控件的相关总结
- ExtJS4学习笔记二--表单控件相关
- EXTJS 学习总结(4-2) FormPanel中控件的验证方法
- dd fdisk mount相关命令的总结
- Android控件WebView的属性设置和相关常用方法总结
- ExtJS基础知识总结:常用控件使用方式(一)
- 总结Android中MD风格相关控件
- EXTJS 4.2 资料 控件之Window窗体相关属性的用法
- QT界面(控件)相关设计的一些技巧总结
- 汉字编码与编程相关问题总结:ASCII、机内码、区位码、国标码、Unicode码他们之间是如何转换的
- QT界面(控件)相关设计的一些技巧总结
- C#线程相关问题总结:基本操作及UI控件交互