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 19 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
jquery提示效果实例分析
Nov 25 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php多文件上传实现代码
2014/02/20 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
使用原生JS实现弹出层特效
2014/12/22 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
python 测试实现方法
2008/12/24 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python频繁写入文件时提速的方法
2019/06/26 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
详解Python 循环嵌套
2020/07/09 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
园长自我鉴定
2013/10/06 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
五分钟演讲稿
2014/04/30 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
道歉的话语大全
2015/05/12 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python