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

相关文章

  • 详解微信小程序(Taro)手动埋点和自动埋点的实现

    详解微信小程序(Taro)手动埋点和自动埋点的实现

    这篇文章主要介绍了详解微信小程序(Taro)手动埋点和自动埋点的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JavaScript的eval JSON object问题

    JavaScript的eval JSON object问题

    在做AJAX应用开发的时候,我们通常喜欢把服务器端返回的JSON格式字符串在客户端的回调函数中把它作为JavaScript代码执行并用一个变量保存起来,以方便使用返回的数据。
    2009-11-11
  • JS中一些高效的魔法运算符总结

    JS中一些高效的魔法运算符总结

    这篇文章主要给阿加介绍了关于JS中一些高效的魔法运算符,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 子父窗口之间的操作

    子父窗口之间的操作

    子父窗口之间的操作...
    2006-07-07
  • javascript之循环停顿上下滚动

    javascript之循环停顿上下滚动

    javascript之循环停顿上下滚动...
    2007-08-08
  • JS数组进阶示例【数组的几种函数用法】

    JS数组进阶示例【数组的几种函数用法】

    这篇文章主要介绍了JS数组进阶,结合实例形式总结分析了数组的几种常见函数基本用法,涉及JavaScript数组元素删除、拼接、添加、倒序排列等相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • javascript如何写热点图

    javascript如何写热点图

    这篇文章主要介绍了javascript如何写热点图,热点图是以点的形式展示,通过补全周边变化颜色也会相应的调整渐变,对热点图感兴趣的朋友可以参考一下
    2015-12-12
  • 原生JS实现图片懒加载之页面性能优化

    原生JS实现图片懒加载之页面性能优化

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。这篇文章主要介绍了页面性能优化原生JS实现图片懒加载 ,需要的朋友可以参考下
    2019-04-04
  • xmlplus组件设计系列之分隔框(DividedBox)(8)

    xmlplus组件设计系列之分隔框(DividedBox)(8)

    xmlplus 是一个JavaScript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus布局类组件之分隔框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript字符串操作的四个实用技巧

    JavaScript字符串操作的四个实用技巧

    在制作前端页面的过程中,经常需要用到JavaScript进行逻辑处理,很多时候都需要对字符串进行操作,这篇文章主要给大家介绍了关于JavaScript字符串操作的四个实用技巧,需要的朋友可以参考下
    2021-07-07

最新评论