GRID拖拽行的实例代码

 更新时间:2013年07月18日 17:04:26   作者:  
这篇文章介绍了GRID拖拽行的实例代码,有需要的朋友可以参考一下

---------------------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);
}
});

相关文章

  • js字符串转换为对象格式的三种方法总结

    js字符串转换为对象格式的三种方法总结

    关于js里面的字符串转对象,又或者是对象转为字符串,都是平时开发应用是经常用到的知识点,下面这篇文章主要给大家介绍了关于js字符串转换为对象格式的三种方法,需要的朋友可以参考下
    2022-12-12
  • JavaScript中的简写语法分享

    JavaScript中的简写语法分享

    这篇文章主要为大家整理了12个JavaScript中常用的简写语法技巧,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以收藏一下
    2023-04-04
  • 获取阴历(农历)和当前日期的js代码

    获取阴历(农历)和当前日期的js代码

    这篇文章主要为大家详细介绍了获取阴历(农历)日期的js代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • webpack HappyPack实战详解

    webpack HappyPack实战详解

    这篇文章主要介绍了webpack HappyPack实战详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 微信小程序自定义菜单导航实现楼梯效果

    微信小程序自定义菜单导航实现楼梯效果

    在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。接下来通过本文给大家介绍微信小程序自定义菜单导航实现楼梯效果,感兴趣的朋友一起看看吧
    2021-12-12
  • 详解JS如何处理可视区域图片懒加载技巧

    详解JS如何处理可视区域图片懒加载技巧

    这篇文章主要为大家介绍了JS如何处理可视区域图片懒加载技巧详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 利用js实现Vue2.0中数据的双向绑定功能

    利用js实现Vue2.0中数据的双向绑定功能

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下
    2021-07-07
  • 关于Google发布的JavaScript代码规范你要知道哪些

    关于Google发布的JavaScript代码规范你要知道哪些

    代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。这篇文章给大家介绍了关于Google发布的JavaScript代码规范你要知道哪些,感兴趣的朋友一起看看吧
    2018-04-04
  • 微信小程序基于canvas渐变实现的彩虹效果示例

    微信小程序基于canvas渐变实现的彩虹效果示例

    这篇文章主要介绍了微信小程序基于canvas渐变实现的彩虹效果,结合实例形式分析了微信小程序线性渐变及圆形渐变的相关实现技巧,需要的朋友可以参考下
    2019-05-05
  • 图像替换新技术 状态域方法

    图像替换新技术 状态域方法

    熟悉css的开发者一定知道图像替换技术,也深知它的意义,Dave Shea 曾在他的一篇文章对此做了详细的总结
    2010-01-01

最新评论