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实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
jQuery操作css样式
May 15 jQuery
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 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处理带有中文URL的方法
2016/07/11 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
Django中的forms组件实例详解
2018/11/08 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python之时间和日期使用小结
2019/02/14 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
详解python UDP 编程
2020/08/24 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
个人简历自我评价范文
2014/02/04 职场文书
讲党性心得体会
2014/09/03 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
2014年商场工作总结
2014/11/22 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
北京青年观后感
2015/06/15 职场文书
地心历险记观后感
2015/06/15 职场文书
追讨欠款律师函
2015/06/24 职场文书
Python基础之元类详解
2021/04/29 Python