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 实现字符串反转的三种方法
Nov 23 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
去掉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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python数据类型详解(二)列表
2016/05/08 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
美发店5.1活动方案
2014/01/24 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
服装设计专业自荐信
2014/06/17 职场文书
政审证明材料
2015/06/19 职场文书
超市员工管理制度
2015/08/06 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
导游词之贵州织金洞
2019/10/12 职场文书