Learn Extjs5 with me. (19--module record drag-and-drop deletion, drag-and-drop replication new)

Learn Extjs5 with me. (19--module record drag-and-drop deletion, drag-and-drop replication new)Web page drag and drop (Drag-drop) is a more interesting operation, EXTJS5 in a very good package of drag-and-drop action, there are various classes to support, but to learn "drag and drop" this thing is very difficult, especially as I do not good English people. Do not understand the official online instructions, do a drag and drop operation at least a few days time. complete the drag-and-drop removal feature below. That is, select a record or multiple records. Then drag to the Delete button. Finally, release the mouse to record the deletion operation. Operation Steps:1. Add a new configuration to the grid so that it records consent to drag.

In the InitComponent function in Grid.js, add

This.viewconfig = {striperows:true,//odd-even line different background enabletextselection:false,//increase consent drag function plugins: [{ptype: ' GRIDVIEWDRAGDR Op ', Ddgroup: ' dd_grid_ ' + viewmodel.get (' tf_modulename '),//Drag grouping must be set, this group name is: Dd_grid_globalenabledrop:false  // Set to False, different intended to drag in this grid}]};

To agree that the grid is capable of single-or multiple-row drag operations, Ddgroup is a grouping, preferably set to unique. Enabledrop is set to false here, assuming that it is set to true, then you can drag to change the location of the record, this function is also more practical, such as a module has a Tf_orderid sequence number of fields, drag later can be self-actively change the sequence number. It would be convenient to sort the records. This feature will be mentioned later.2, to "delete" button to increase the consent drop function.

{text: ' delete ', Disabled:true,glyph:0xf014,itemid: ' DeleteButton ', listeners: {click: ' Deleterecords ',//Do not use handler here, and to use Click, as the following to send the Click event//Delete button to add the ability to drop after rendering render:function (button) {//Can drag the selected records in the grid onto this button to delete Button.dropzone = New Ext.dd.DropZone (Button.getel (), {//Ddgroup here need to be consistent with settings in grid ddgroup: ' dd_grid_ ' + viewmodel.get (' Tf_modulename ') ,//This function does not make clear what meaning, no not yet gettargetfromevent:function (e) {return e.gettarget (");},//the user drags the selected record through this button onnodeover: function (target, DD, E, data) {return ext.dd.dropzone.prototype.dropallowed;},//user release mouse button, delete record Onnodedrop:function ( Target, DD, E, data) {button.fireevent (' click ', button);//Run Delete button's Click event}})}}}

Although there are few statements. It's really not easy to write. The following three diagrams illustrate three procedures: drag, drop, run click event.





The above is the entire process of dragging and deleting, assuming a better understanding of the drag-and-drop operation, please crossing the Web's special description.

The following continues the drag-and-drop copy of the new feature, first select a record. Then drag to the New button to add a record with the value of the selected record as the default (in addition to the primary key).

The drag code in the grid already has. Just add the drop code to the "Add" button.

{text: ' New ', Xtype: ' SplitButton ', itemId: ' New ', Glyph:0xf016,menu: [{text: ' Copy new ', ToolTip: ' Add the current record to the new record first ', Itemi D: ' Newwithcopy ', listeners: {click: ' Addrecordwithcopy '},glyph:0xf0c5}, '-', {text: ' Upload Excel table single new ', tooltip: ' According to the specified E Xcel table after the data is added. Upload a new record ', glyph:0xf062}, {text: ' Upload Excel table Batch new ', ToolTip: ' According to the requirements of the downloaded Excel table to add data, upload batch new data ', Glyph:0xf062}],listeners: {click: ' AddRecord ',//Do not use handler here. Instead, use the click to send the Click event//Delete button after rendering to add the ability to drop render:function (button) {// The ability to drag selected records from the grid onto this button to copy the new Button.dropzone = new Ext.dd.DropZone (Button.getel (), {//Ddgroup here need to be consistent with the settings in the grid Ddgroup : ' Dd_grid_ ' + viewmodel.get (' Tf_modulename '), Gettargetfromevent:function (e) {return e.gettarget (');},// The user drags the selected record through this button onnodeover:function (target, DD, E, data) {return ext.dd.dropzone.prototype.dropallowed;},//the user has released the mouse button. Delete Record onnodedrop:function (target, DD, E, data) {var b = button.menu.down (' #newwithcopy '); b.fireevent (' click ', b);}}}}}

Copy the new events in the Modulecontroller.js.

Adds a new record based on the selected record Addrecordwithcopy:function () {var grid = This.getview (). Down (' Modulegrid '), SM = Grid.getselectionmodel (); if (Sm.getselection (). Length! = 1) {ext.toast {title: ' Warning ', HTML: ' Please select a record before you run this action!
', 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) {//assigns the selected recorded model to a value new record Model.set (Field.name, Sm.getselection () [0].get (Field.name));}); Model.set (' tf_id ', null); Set to NULL, you can actively add Grid.getstore (). Insert (0, model); Sm.select (model); Select the current new record}

After the above steps, you can run the new menu to add a copy, you can also drag a record to the "new" button to add a new record.

These sections of the source code modification is also more, assuming that after the problem, the next section will be published in the first 20 sections of the source code, download the study yourself.

Learn Extjs5 with me. (19--module record drag-and-drop deletion, drag-and-drop replication new)