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 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
jquery实现图片切换代码
Oct 13 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
js数据类型检测总结
Aug 05 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 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用mysql数据库存储session的代码
2010/03/05 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
html下载本地
2006/06/19 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
vuex提交state&&实时监听state数据的改变方法
2018/09/16 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python之父谈Python的未来形式
2016/07/01 Python
使用Python对MySQL数据操作
2017/04/06 Python
python生成二维码的实例详解
2017/10/29 Python
Python rstrip()方法实例详解
2018/11/11 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
性能服装:HYLETE
2018/08/14 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
公证委托书格式
2014/09/13 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL