Learn extjs5 with me (19 -- drag-and-drop deletion of module records and addition of drag-and-drop replication), extjs519 --

Learn extjs5 with me (19 -- drag-and-drop deletion of module records and addition of drag-and-drop replication), extjs519 --
I learned with you how to use the extjs5 (19 -- drag-and-drop deletion of module records, drag-and-drop replication added) drag-and-drop operations in the webpage, extjs5 well encapsulates drag-and-drop actions and supports various types. However, it is really difficult to learn "drag-and-drop" well, especially for people who are not good at English like me, I don't quite understand the instructions on the official website. It takes at least a few days to perform a drag-and-drop operation. The following describes the drag-and-drop deletion function. That is, select one or more records, drag them to the "delete" button, and release the mouse to delete the records. Operation steps: 1. Add a new configuration to the Grid so that its records can be dragged. Add the following to the initComponent function in Grid. js:

This. viewConfig = {stripeRows: true, // enableTextSelection: false for different background colors of the parity row, // Add the allowed drag function plugins: [{ptype: 'gridviewdragdrop', ddGroup: 'dd _ grid _ '+ viewModel. get ('tf _ moduleName '), // you must set the group name to DD_grid_GlobalenableDrop: false. // set it to false, drag}]} In this grid is not allowed;

To allow the Grid to drag one or more rows. ddGroup is a group, preferably set to unique. EnableDrop is set to false here. If it is set to true, you can drag to change the position of the record. This function is also useful. For example, a module contains a field with a sequence number of tf_orderId, after dragging, the sequence number can be changed automatically, which is very convenient for sorting records. This function will be discussed later. 2. Add the Drop function to the delete button.

{Text: 'delete', disabled: true, glyph: 0xf014, itemId: 'deletebattout', listeners: {click: 'deleteterrecords ', // do not use handler here, click is used, because the click event will be sent below // The delete button will be added to the render: function (button) function after rendering) {// drag the records selected in the Grid to this button to delete the button. dropZone = new Ext. dd. dropZone (button. getEl (), {// The ddGroup must be consistent with the ddGroup set in Grid: 'dd _ grid _ '+ viewModel. get ('tf _ moduleName '), // This function does not understand what it means. If it does not, getTargetFromEvent: function (e) {return e. getTarget ('') ;}, // The user dragged the selected record to the onNodeOver: function (target, dd, e, data) {return Ext. dd. dropZone. prototype. dropAllowed;}, // The user releases the mouse key and deletes the onNodeDrop: function (target, dd, e, data) {button. fireEvent ('click', button); // click event for executing the delete button }})}}}

It is not easy to write a few statements. The following three figures demonstrate three processes: drag, drop, and click.





The above are all the processes of drag and drop operations. If you want to better understand the drag and drop operations, please refer to the topic description on the official website.
Next we will continue to do the drag-and-drop copy new function. First select a record and then drag it to the "add" button. The selected record value will be used as the default value (except the primary key) to add a record. The drag code in the Grid already exists. You only need to add the drop code on the "add" button.

{Text: 'add', xtype: 'splitte', itemId: 'new', glyph: 0xf016, menu: [{text: 'Copy add', tooltip: 'Add the current record to the new record first ', itemId: 'newwithcopy', listeners: {click: 'dwcordwithcopy'}, glyph: 0xf0c5},'-', {text: 'upload Excel form bar add', tooltip: 'After adding data based on the specified excel table, upload a new record ', glyph: 0xf062}, {text: 'batch add an Excel table ', tooltip: 'After adding data according to the requirements in the downloaded Excel table, upload batch add data', glyph: 0xf062}], listeners: {click: 'bucket', // do not use handler here, But click, because the click event is sent below. // The delete button is added to the render: function (button) function after rendering) {// drag the records selected in the Grid to this button to copy and add a new button. dropZone = new Ext. dd. dropZone (button. getEl (), {// The ddGroup must be consistent with the ddGroup set in Grid: 'dd _ grid _ '+ viewModel. get ('tf _ moduleName '), getTargetFromEvent: function (e) {return e. getTarget ('') ;}, // The user dragged the selected record to the onNodeOver: function (target, dd, e, data) {return Ext. dd. dropZone. prototype. dropAllowed;}, // The user releases the mouse key and deletes the record onNodeDrop: function (target, dd, e, data) {var B = button. menu. down ('# newwithcopy'); B. fireEvent ('click', B );}})}}}

Copy the newly added events and place them in ModuleController. js.

// Add a new record addRecordWithCopy: function () {var grid = this. getView (). down ('lelegrid'), sm = grid. getSelectionModel (); if (sm. getSelection (). length! = 1) {Ext. toast ({title: 'Warning ', html:' select a record first and then perform this operation! ', 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) {// assign the model of the selected record to the new record model. set (field. name, sm. getSelection () [0]. get (field. name) ;}); model. set ('tf _ id', null); // set to null to automatically add a grid. getStore (). insert (0, model); sm. select (model); // select the currently added record}

After the preceding steps, you can copy and add a record from the Add menu, or drag a record to the Add button to add a record. The source code of these sections is also changed a lot. If you have any problem with it, the first 20 sections of the source code will be released in the next section. You have downloaded the study on your own.




How to Use js to add and delete drag-and-drop div

Give you two links to see if you need them
Www.lanw.uku.com/js/410w-630.html
Www.lanw.uku.com/js/410w-97.html
 
Ext Portal module drag-and-drop (which can be saved). Is there any such example?

You have seen the most complete ext portal example on the Internet. You can save the location information after the ext portal is dragged to the database. It seems that there is an Online demo address which should be faceye.com/faceye-ext-portalat the bottom right corner of the client.