GRID拖拽行的实例代码

这篇文章介绍了GRID拖拽行的实例代码,有需要的朋友可以参考一下
 

---------------------GRID拖拽行的实例代码  单行拖拽---------------------------------------

复制代码 代码如下:

//创建第一个GRID
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDdGroup',//这里是第二个GRID的ddGroup
store       : firstGridStore,
enableDragDrop : true,//True表示启动对于GridPanel中选中行的拖动行为
……其他属性省略
});

//创建第二个GRID
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDdGroup',//这里是第一个GRID的ddGroup
store       : secondGridStore,
enableDragDrop : true,//True表示启动对于GridPanel中选中行的拖动行为
……其他属性省略
});

//创建第一个GRID的ddGroup
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup    : 'firstGridDdGroup',//和第二个GRID的ddGroup相同
copy        : true,
notifyDrop : function(ddSource, e, data){
   function addRow(record, index, allItems) {
    var foundItem = secondGridStore.find('name', record.data.name);
    if (foundItem == -1) {
     firstGridStore.add(record);
     firstGridStore.sort('name', 'ASC');
     ddSource.grid.store.remove(record);
    }
   }
   Ext.each(ddSource.dragData.selections ,addRow);
   return(true);
}
)};

//创建第二个GRID的ddGroup
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1];
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl,{
ddGroup : 'secondGridDdGroup',//和第一个GRID的ddGroup相同
copy        : true,
notifyDrop : function(ddSource, e, data){
   function addRow(record, index, allItems) {
    var foundItem = secondGridStore.find('name', record.data.name);
    if (foundItem == -1) {
     secondGridStore.add(record);
     secondGridStore.sort('name', 'ASC');
     ddSource.grid.store.remove(record);
    }
   }
   Ext.each(ddSource.dragData.selections ,addRow);
   return(true);
}
});

时间: 2024-09-12 19:33:54

GRID拖拽行的实例代码的相关文章

GRID拖拽行的实例代码_javascript技巧

---------------------GRID拖拽行的实例代码  单行拖拽--------------------------------------- 复制代码 代码如下: //创建第一个GRIDvar firstGrid = new Ext.grid.GridPanel({ddGroup : 'secondGridDdGroup',//这里是第二个GRID的ddGroupstore       : firstGridStore,enableDragDrop : true,//True表示

Android条目拖拽删除功能实例代码

项目中需求,要做条目条目拖拽删除效果,实际效果和QQ消息删除一样,侧滑有制定和删除. 效果图 第一步效果图 1.0自定义控件 SwipeLayout 继承FrameLayout重写里面三个构造方法,分别调用initView(). 2.0在布局中使用自定义控件 3.0在initView()方法中,创建拖拽辅辅助工具 ViewDragHelper() 该方法需要传入回调 MyCallBack() 4.0,创建MyCallBack()回调,继承ViewDragHelper.Callback 在回调中

Extjs4中tree的拖拽功能简单实例

这篇文章主要介绍了Extjs4中tree的拖拽功能简单实例,有需要的朋友可以参考一下 代码如下: //只要要在treepanel中配置一下viewConfig即可,如果是两棵树之间,两棵树都要配置     viewConfig:{    plugins :{     ptype:'treeviewdragdrop',     appendOnly:true   //只能拖着带非叶节点上    },    listeners:{//监听器     drop:function(node,data,o

jquery实现可旋转可拖拽的文字效果代码_jquery

本文实例讲述了jquery实现可旋转可拖拽的文字效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript

JS实现动态增加和删除li标签行的实例代码_javascript技巧

如下所示: function addDepartment() { <span style="white-space:pre"> </span>var x = document.getElementById('department'); <span style="white-space:pre"> </span>var l = x.childNodes.length; <span style="white

jquery拖拽效果完整实例(附demo源码下载)_jquery

本文实例讲述了jquery实现的拖拽效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: html部分: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="

jQuery控制Div拖拽效果完整实例分析_jquery

本文实例讲述了jQuery控制Div拖拽效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

简单的jquery拖拽排序效果实现代码_jquery

步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素: 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)_javascript技巧

拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标. 拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位置-物体位置的差值就是那个距离 是吧.那这个斜线就是横线和竖线组成的. 我们距离看下程序怎么做. <div id="div1"> </div> 实际上他改的就是某个div 的left top ,那他就动起来了. 那样式中肯定要有绝对定位是吧. <style t