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 22 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Javascript实现简易天数计算器
2020/05/18 Javascript
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python去除扩展名的实例讲解
2018/04/23 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Python Flask框架扩展操作示例
2019/05/03 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python多进程并行代码实例
2019/09/30 Python
python 操作hive pyhs2方式
2019/12/21 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
python 读取.nii格式图像实例
2020/07/01 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
办公室文秘自我评价
2013/09/21 职场文书
人事任命书格式
2014/06/05 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python