Extjs4实现两个GridPanel之间数据拖拽功能具体方法


Posted in Javascript onNovember 21, 2013

1、之前在winForm上有看过在选择数据时会将一些数据放在待选框中,而用户可以将想要选择的数据放到备选框中,那么如何用Extjs实现类似功能,我们选择用两个gridPanel来模拟其中的备选框和待选框。如下图所示:

Extjs4实现两个GridPanel之间数据拖拽功能具体方法

定义代码如下:

         {
               xtype:'gridpanel',
               multiSelect: true,
                id:'staff', 
                x: 5,
             y: 0,
             height: 205,
             width: 260,
                viewConfig: {  
                    plugins: {  
                         ptype: 'gridviewdragdrop',  
                         dragGroup: 'firstGridDDGroup',  
                       dropGroup: 'secondGridDDGroup'  
               },
               listeners: {  
                  drop: function(node, data, dropRec, dropPosition) {  
                      var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                  }  
               }  
           },
            store:StaffData, //加载数据的store 
            columns: columns,  
            stripeRows: true,  
            title: '从业人员',  
            margins: '0 2 0 0'  
            },
           {
            xtype:'gridpanel',
            id:'admin',
            x: 280,
           y: 0,
           height: 205,
           width: 260,
          viewConfig: {  
              plugins: {  
                  ptype: 'gridviewdragdrop',  
                  dragGroup: 'secondGridDDGroup',  
                  dropGroup: 'firstGridDDGroup'  
              },  
              listeners: {  
                  drop: function(node, data, dropRec, dropPosition) {  
                      var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view'; 
                  }  
              }  
          },  
          store:AdminData,  
          columns:columns,  
          stripeRows:true,  
          title:'管理员',  
          margins:'0 0 0 3'
           }

这样我们在拖拽时即可以将数据存储在所对应的store中,需要的时候从store取出数据即可。
Javascript 相关文章推荐
加载 Javascript 最佳实践
Oct 30 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
详解Vue的options
May 15 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
JQuery的ready函数与JS的onload的区别详解
Nov 21 #Javascript
js 实现菜单上下显示附效果图
Nov 21 #Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 #Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 #Javascript
js获取对象为null的解决方法
Nov 21 #Javascript
tangram框架响应式加载图片方法
Nov 21 #Javascript
使图片旋转的3种解决方案
Nov 21 #Javascript
You might like
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
关于js类的定义
2011/06/28 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
常用jQuery代码分享
2015/07/14 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python re模块findall()函数实例解析
2018/01/19 Python
Python实现识别手写数字大纲
2018/01/29 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
高中校园广播稿
2014/10/21 职场文书
2014年领班工作总结
2014/11/25 职场文书
小学生作文评语集锦
2014/12/25 职场文书
童年读书笔记
2015/06/26 职场文书