网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一个拖放的操作起码得几天的时间。

下面完成拖放删除的功能。即,选中一条记录或多条记录,然后拖动到“删除”按钮上,最后松开鼠标进行记录删除的操作。操作步骤:

1、给Grid增加新的配置,使其记录允许拖动。在Grid.js中的initComponent函数中加入

this.viewConfig = {
stripeRows: true, // 奇偶行不同底色
enableTextSelection: false,
// 加入允许拖动功能
plugins: [{
ptype: 'gridviewdragdrop',
ddGroup: 'DD_grid_' + viewModel.get('tf_moduleName'), // 拖动分组必须设置,这个分组名称为:DD_grid_Global
enableDrop: false // 设为false,不允许在本grid中拖动
}] };

来允许Grid可以进行单行或多行的拖动操作,ddGroup是一个分组,最好是设置成唯一的。enableDrop在这里设置为false , 如果设置成true,那么就可以拖动改变记录的位置,这个功能也是比较有用的,例如一个模块中有一个tf_orderId 顺序号的字段,拖动以后可以自动改变顺序号,那对记录的排序将是非常方便的,这个功能以后会讲到。

2、给“删除”按钮加入允许Drop的功能。

{
text : '删除',
disabled : true,
glyph : 0xf014,
itemId : 'deletebutton',
listeners : {
click : 'deleteRecords', // 这里不要用handler,而要用click,因为下面要发送click事件
// 删除按钮在渲染后加入可以Drop的功能
render : function(button) {
// 可以使Grid中选中的记录拖到到此按钮上来进行删除
button.dropZone = new Ext.dd.DropZone(button.getEl(), {
// 此处的ddGroup需要与Grid中设置的一致
ddGroup : 'DD_grid_' + viewModel.get('tf_moduleName'), // 这个函数没弄明白是啥意思,没有还不行
getTargetFromEvent : function(e) {
return e.getTarget('');
},
// 用户拖动选中的记录经过了此按钮
onNodeOver : function(target, dd, e, data) {
return Ext.dd.DropZone.prototype.dropAllowed;
},
// 用户放开了鼠标键,删除记录
onNodeDrop : function(target, dd, e, data) {
button.fireEvent('click', button); // 执行删除按钮的click事件
}
})
}
}
}

虽然没有几条语句,要写出来还真是不容易。下面三个图演示了三个过程:拖动、放下、执行click事件。

以上即是拖动删除的所有过程,如果要更好的了解拖放操作,请看官网的专题说明。

下面再继续做拖放复制新增的功能,先选中一条记录,然后拖动到“新增”按钮上,会将选中的记录的值作为默认值(除了主键)来增加一条记录。Grid中的拖动代码已经有了,只要在“新增”按钮上加上drop的代码即可。

{
text : '新增',
xtype : 'splitbutton',
itemId : 'new',
glyph : 0xf016,
menu : [{
text : '复制新增',
tooltip : '新增时先将当前记录添入到新记录中',
itemId : 'newwithcopy',
listeners : {
click : 'addRecordWithCopy'
},
glyph : 0xf0c5
}, '-', {
text : '上传Excel表单条新增',
tooltip : '根据指定的excel表添好数据后,上传新增一条记录',
glyph : 0xf062
}, {
text : '上传Excel表批量新增',
tooltip : '根据下载的Excel表中的要求添加数据后,上传批量新增数据',
glyph : 0xf062
}],
listeners : {
click : 'addRecord', // 这里不要用handler,而要用click,因为下面要发送click事件
// 删除按钮在渲染后加入可以Drop的功能
render : function(button) {
// 可以使Grid中选中的记录拖到到此按钮上来进行复制新增
button.dropZone = new Ext.dd.DropZone(button.getEl(), {
// 此处的ddGroup需要与Grid中设置的一致
ddGroup : 'DD_grid_' + viewModel.get('tf_moduleName'), getTargetFromEvent : function(e) {
return e.getTarget('');
},
// 用户拖动选中的记录经过了此按钮
onNodeOver : function(target, dd, e, data) {
return Ext.dd.DropZone.prototype.dropAllowed;
},
// 用户放开了鼠标键,删除记录
onNodeDrop : function(target, dd, e, data) {
var b = button.menu.down('#newwithcopy');
b.fireEvent('click', b);
}
})
}
}
}
复制新增的事件放在ModuleController.js中。 // 根据选中的记录复制新增一条记录
addRecordWithCopy : function() {
var grid = this.getView().down('modulegrid'), sm = grid.getSelectionModel();
if (sm.getSelection().length != 1) {
Ext.toast({
title : '警告',
html : '请先选择一条记录,然后再执行此操作!',
saveDelay : 10,
align : 'tr',
closable : true,
minWidth : 200,
useXAxis : true,
slideInDuration : 500
});
return;
}
var model = Ext.create(grid.getStore().model);
Ext.Array.each(model.fields, function(field) { // 将选中记录的model都赋给值新的记录
model.set(field.name, sm.getSelection()[0].get(field.name));
});
model.set('tf_id', null); // 设置为null,可自动增加
grid.getStore().insert(0, model);
sm.select(model); // 选中当前新增的记录
}

经过以上步骤,你可以执行新增菜单里的复制新增,也可以拖动一条记录到“新增”按钮上来新增一条记录。这几节源码改动得也比较多,如果跟着做有问题的话,下节会发布前20节的源码,自行下载了研究吧。

18、手把手教你Extjs5(十八)模块记录的拖放删除、拖放复制新增的更多相关文章

  1. 8、手把手教你Extjs5(八)自定义菜单2

    这一节来定义另外三种类型的菜单类.首先定义菜单按钮类.文件放于app/view/main/region目录下面,文件名为ButtonMainMenu.js. /** * 显示在顶部的按钮菜单,可以切换 ...

  2. 手把手教你mysql(十)索引

    手把手教你mysql(十)索引 一:索引的引入 索引定义:索引是由数据库表中一列或者多列组合而成,其作用是提高对表中数据的查询速度. 类似于图书的目录,方便快速定位,寻找指定的内容,如一本1000页的 ...

  3. 11、手把手教你Extjs5(十一)模块界面的总体设计

    上一节中设计了一些模块自定义中用到的要素,为了直观起见,这一节先建立一个模块的主界面.看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了.一个模块的主界面是一个Grid,在其上方 ...

  4. 22、手把手教你Extjs5(二十二)模块Form的自定义的设计[1]

    下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formScheme ...

  5. 20、手把手教你Extjs5(二十)模块Grid的多列表方案

    对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容 ...

  6. 19、手把手教你Extjs5(十九)模块Grid的其他功能的设想

    经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作.由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中. 比如对 ...

  7. 14、手把手教你Extjs5(十四)模块字段和Grid列的定义[2]

    model和columns生成好了,下面要修改一下Module.js和Grid.js中的代码,使其能够协同工作. /** * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系 */ ...

  8. 12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块

    上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和 ...

  9. 10、手把手教你Extjs5(十)自定义模块的设计

    从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...

随机推荐

  1. Hibernate 系列教程2-创建maven工程

    第1步:通过eclipse新建1个java maven项目. 选择file–>new–>other–>MAVEN PROJECT选项 第2步:New Maven project 选择 ...

  2. 转载:数位DP模板

    // pos = 当前处理的位置(一般从高位到低位) 2 // pre = 上一个位的数字(更高的那一位) 3 // status = 要达到的状态,如果为1则可以认为找到了答案,到时候用来返回, 4 ...

  3. 通过intent启动Activity

    android应用程序内部通过Intent来实现Activity间的跳转.也知道通过Intent调用系统程序.但若想在应用程序A内开启应用程序B(前提是A.B均已安装),该如何去实现? 记录下实现过程 ...

  4. 好的 小图标 html

    只需引用样式,加入字体文件到项目中就可实现 <link href="css/font-awesome.min.css" rel="stylesheet"& ...

  5. HBase Coprocessor 剖析与编程实践(转载http://www.cnblogs.com/ventlam/archive/2012/10/30/2747024.html)

    HBase Coprocessor 剖析与编程实践 1.起因(Why HBase  Coprocessor) HBase作为列族数据库最经常被人诟病的特性包括:无法轻易建立“二级索引”,难以执行求和. ...

  6. Hadoop学习笔记—5.自定义类型处理手机上网日志

    转载自http://www.cnblogs.com/edisonchou/p/4288737.html Hadoop学习笔记—5.自定义类型处理手机上网日志 一.测试数据:手机上网日志 1.1 关于这 ...

  7. 利用apache组件实现文件上传

    实现文件上传需要引入: commons-fileupload-1.3.2.jar commons-io-2.5.jar commons-logging-1.2.jar <!DOCTYPE htm ...

  8. 笔记整理--Linux平台MYSQL的C语言

    Linux平台MYSQL的C语言API全列表 - 第三只眼的专栏 - 博客频道 - CSDN.NET - Google Chrome (2013/8/18 22:28:58)   Linux平台MYS ...

  9. List<Map>去重排序

    数据格式 [ { "id":"d3e8a9d6-e4c6-4dd8-a94f-07733d3c1b59", "parentId":" ...

  10. ibdata1文件--缩小mysql数据库的ibdata1文件

    摘要 在MySQL数据库中,如果不指定innodb_file_per_table参数,单独存在每个表的数据,MySQL的数据都会存放在ibdata1文件. mysql ibdata1存放数据,索引等, ...