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 改变CSS样式基础代码
Feb 11 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
简单谈谈json跨域
Mar 13 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
javascript数组的定义及操作实例
Nov 10 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
paypal即时到账php实现代码
2010/11/28 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python中文编码知识点
2019/02/18 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
用python做游戏的细节详解
2019/06/25 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
学习作风建设心得体会
2014/10/22 职场文书
承诺书范本
2015/01/21 职场文书
SQL写法--行行比较
2021/08/23 SQL Server
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技