跟我一起学extjs5(19--模块记录的拖放删除、拖放复制新增)

        网页其中的拖放(drag-drop)是比較有趣的操作,extjs5中非常好的封装了拖放的动作,也有各种类来支持,可是要学好“拖放”这个东西真是非常难,特别是象我这样英语不好的人。看不太懂官网上的说明,做一个拖放的操作起码得几天的时间。
        以下完毕拖放删除的功能。即,选中一条记录或多条记录。然后拖动到“删除”button上。最后松开鼠标进行记录删除的操作。操作步骤:
        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、给“删除”button增加同意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事件
}
})
}
}
}

尽管没有几条语句。要写出来还真是不easy。以下三个图演示了三个过程:拖动、放下、运行click事件。







        以上即是拖动删除的全部过程,假设要更好的了解拖放操作,请看官网的专题说明。


        以下再继续做拖放复制新增的功能,先选中一条记录。然后拖动到“新增”button上,会将选中的记录的值作为默认值(除了主键)来添加一条记录。

Grid中的拖动代码已经有了。仅仅要在“新增”button上加上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); // 选中当前新增的记录
}

经过以上步骤,你能够运行新增菜单里的复制新增,也能够拖动一条记录到“新增”button上来新增一条记录。

这几节源代码修改得也比較多,假设跟着做有问题的话,下节会公布前20节的源代码,自行下载了研究吧。





跟我一起学extjs5(19--模块记录的拖放删除、拖放复制新增)的更多相关文章

  1. 跟我一起学extjs5(11--自己定义模块的设计)

    跟我一起学extjs5(11--自己定义模块的设计)        从这一节開始我们来设计并完毕一个自己定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息. 下面信息仅仅是我自己在开发过程中 ...

  2. 跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])

    跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])         写了几个月,总算有点盼头了,最终要从后台取得数据了.后台的spring mvc 和 service 仅仅能简单的 ...

  3. 跟我一起学extjs5(42--单个模块的数据新增方式)

    跟我一起学extjs5(42--单个模块的数据新增方式)         前面的章节中已经增加了一个自己定义的模块,而且能够进行数据的新增.改动.删除的操作了,在这个基础上就能够大作文章了. 这一节来 ...

  4. 跟我一起学extjs5(13--运行菜单命令在tabPanel中显示模块)

    跟我一起学extjs5(13--运行菜单命令在tabPanel中显示模块)         上面设计好了一个模块的主界面,以下通过菜单命令的运行来把这个模块增加到主界面其中. 在MainModule. ...

  5. 18、手把手教你Extjs5(十八)模块记录的拖放删除、拖放复制新增

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

  6. 跟我一起学extjs5(22--模块Form的自己定义的设计)

    跟我一起学extjs5(22--模块Form的自己定义的设计)         前面几节完毕了模块Grid的自己定义,模块Form自己定义的过程和Grid的过程类似,可是要更复杂一些.先来设计一下要完 ...

  7. 跟我一起学extjs5(18--模块的新增、改动、删除操作)

    跟我一起学extjs5(18--模块的新增.改动.删除操作)         上节在Grid展示时做了一个金额单位能够手工选择的功能,假设你要增加其它功能.也仅仅要依照这个模式来操作即可了,比方说你想 ...

  8. 跟我一起学extjs5(24--模块Form的自己定义的设计[2])

    跟我一起学extjs5(24--模块Form的自己定义的设计[2])         在本节中将要增加各种类型的字段,在增加字段的时候因为能够一行增加多个字段,因此层次结构又多了一层fieldcont ...

  9. 跟我一起学extjs5(16--各种Grid列的自己定义渲染)

    跟我一起学extjs5(16--各种Grid列的自己定义渲染)         Grid各列已经可以展示出来了.列的类型包含字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自己定义了各种类型 ...

随机推荐

  1. 3D模型选中显示样式改变

    osg::ref_ptr<osg::Material> material = new osg::Material(); //模型材质信息 material->setTranspare ...

  2. CDC不同模式在ODI中体现系列之一 同步模式

    CDC不同模式在ODI中体现系列之一 同步模式 Oracle Database Change Data Capture feature 变化数据捕获是一个通称,是用来描述捕捉增量变化应用到数据存储.随 ...

  3. 基于ArcEngine的影像数据管理系统研制

    基于ArcEngine的影像数据管理系统研制 如果批处理,速度很慢,效率低. 详情如下: 分成很多小块的影像数据,要达到连续显示的效果,并导入ArcSDE for SQL Server中以方便管理.在 ...

  4. 转: ES6异步编程: co函数库的含义与用法

    转: ES6异步编程: co函数库的含义与用法 co 函数库是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具,用于 Generator 函数的自动执行. 比如,有一个 Ge ...

  5. Android之CookieStore的持久化

    CookieStore是一个对象,有的服务端 ,比如.net,保持登录状态不是用httpclient.addHeader(“cookie”,SessionId),而是用httppost.setCook ...

  6. Unix/Linux环境C编程入门教程(4) Debian Linux环境搭建

    Unix/Linux版本众多,我们推荐Unix/Linux初学者选用几款典型的Unix/Linux操作系统进行学习. 1.广义的Debian是指一个致力于创建自由操作系统的合作组织及其作品,由于Deb ...

  7. [笔记]线性回归&梯度下降

    一.总述 线性回归算法属于监督学习的一种,主要用于模型为连续函数的数值预测. 过程总得来说就是初步建模后,通过训练集合确定模型参数,得到最终预测函数,此时输入自变量即可得到预测值. 二.基本过程 1. ...

  8. 关于jquery的each的操作;

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Saiku图表导出时中文显示问题的解决方法

    Saiku图表导出时png,jpg,pdf三种格式的中文显示都有问题,目前找到一种不太完善的解决方法(中文可以显示但不清晰),需要修改Saiku项目下的ExporterResource.java文件, ...

  10. WKWebView与sessionID的因果

    问题描述:在webView中点击下载按钮后,下载成功文件,然后再去点击上传文件,这时候服务器会报用户未登录错误. 暂时分析的原因是WKWebView在下载后cookie会保存服务器产生的session ...