GRID拖拽行的实例代码


Posted in Javascript onJuly 18, 2013

---------------------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);
}
});
Javascript 相关文章推荐
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 #Javascript
gridpanel动态加载数据的实例代码
Jul 18 #Javascript
javaScript NameSpace 简单说明介绍
Jul 18 #Javascript
JS获取鼠标坐标的实例方法
Jul 18 #Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 #Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 #Javascript
JS随机生成不重复数据的实例方法
Jul 17 #Javascript
You might like
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
提升PHP执行速度全攻略(上)
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python 布尔操作实现代码
2013/03/23 Python
小小聊天室Python代码实现
2016/08/17 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
3分钟演讲稿
2014/04/30 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
毕业实习感受与体会
2015/05/26 职场文书
孔繁森观后感
2015/06/10 职场文书