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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
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缓存类代码
2015/10/23 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python解惑之True和False详解
2017/04/24 Python
在python中实现对list求和及求积
2018/11/14 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
python使用thrift教程的方法示例
2019/03/21 Python
python 中xpath爬虫实例详解
2019/08/26 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
遗嘱继承公证书
2014/04/09 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
redis protocol通信协议及使用详解
2022/07/15 Redis