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 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 like me, poor English people, see the official online instructions, Doing a drag-and-drop operation takes a few days at least. The following completes the drag-and-drop removal feature. That is, select a record or multiple records, then drag to the Delete button, and finally release the mouse to record the delete operation. Operation Steps:1. Add a new configuration to the grid so that its records are allowed to be dragged. In the InitComponent function in Grid.js, add

This.viewconfig = {striperows:true,//odd-even line different background enabletextselection:false,//add allow 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, do not allow dragging in this grid}]};

To allow the grid to be a single-or multiple-row drag operation, Ddgroup is a grouping, preferably set to unique. Enabledrop is set to false here, if set to true, then you can drag to change the location of the record, this function is also more useful, such as a module has a Tf_orderid sequence number of fields, drag can automatically change the sequence number, The sorting of the records will be very convenient, this feature will be discussed later.2. Add the Allow drop function to the "delete" button.

{text: ' delete ', Disabled:true,glyph:0xf014,itemid: ' DeleteButton ', listeners: {click: ' Deleterecords ',//Do not use handler here, Instead, use Click to send the Click event//Delete button after rendering to add a function that can drop render:function (button) {///You can drag the selected record from the grid to 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 understand what it means, 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);//Execute Delete button's Click event}})}}}

Although there are few statements, it is not easy to write them out. The following three diagrams illustrate three procedures: drag, drop, and execute the Click event.





The above is the drag delete all the process, if you want to better understand the drag-and-drop operation, please crossing the Web's special description.
then continue to do drag and drop copy new features, first select a record, and then drag to the "new" button, the value of the selected record as the default value (in addition to the primary key) to add a record. The drag code in the grid is already available, 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 Add good data, 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 the handler here, but to use the click, because the following to send the Click event//Delete button After rendering added can drop function render:function ( button) {//You can drag the selected records from the grid to this button to copy the new Button.dropzone = new Ext.dd.DropZone (Button.getel (), {// The 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;},//User Release 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 performing 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 to automatically increase Grid.getstore (). Insert (0, model); Sm.select (model); Select the current new record}

Following the steps above, you can add a new record in the new menu, or you can drag a record to the new button. These sections of the source code changes are also more, if you do have problems, the next section will be released in the first 20 sections of the source code, download the study yourself.