Extjs4 implements a specific method of data drag and drop between two gridpanels

  • 2020-03-29 23:56:03
  • OfStack

1. I have seen before on winForm that some data will be put into the waiting box when selecting data, and users can put the data they want to select into the standby box. Then how to implement similar functions with Extjs? As shown in the following figure:

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201311/20131121144617805.jpg" >

The definition code is as follows:


         {
               xtype:'gridpanel',
               multiSelect: true,
                id:'staff', 
                x: 5,
             y: 0,
             height: 205,
             width: 260,
                viewConfig: {  
                    plugins: {  
                         ptype: 'gridviewdragdrop',  
                         dragGroup: 'firstGridDDGroup',  
                       dropGroup: 'secondGridDDGroup'  
               },
               listeners: {  
                  drop: function(node, data, dropRec, dropPosition) {  
                      var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                  }  
               }  
           },
            store:StaffData, //Store where data is loaded
            columns: columns,  
            stripeRows: true,  
            title: ' practitioners ',  
            margins: '0 2 0 0'  
            },
           {
            xtype:'gridpanel',
            id:'admin',
            x: 280,
           y: 0,
           height: 205,
           width: 260,
          viewConfig: {  
              plugins: {  
                  ptype: 'gridviewdragdrop',  
                  dragGroup: 'secondGridDDGroup',  
                  dropGroup: 'firstGridDDGroup'  
              },  
              listeners: {  
                  drop: function(node, data, dropRec, dropPosition) {  
                      var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view'; 
                  }  
              }  
          },  
          store:AdminData,  
          columns:columns,  
          stripeRows:true,  
          title:' The administrator ',  
          margins:'0 0 0 3'
           }

In this way, we can store the data in the corresponding store when we drag and drop, and then we can fetch the data from the store when we need it.


Related articles: