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实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 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
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
python实现图像拼接
2020/03/05 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
学生安全责任书
2014/04/15 职场文书
理想演讲稿范文
2014/05/21 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS