Extjs4 specific method to implement data dragging function between two GridPanels

Extjs4 specific method to implement data dragging function between two GridPanels_javascript skills

WBOY

Release： 2016-05-16 17:13:25

Original

1008 people have browsed it

1. I have seen on winForm before that when selecting data, some data will be placed in the selection box, and the user can put the data they want to select into the selection box, so how to use Extjs to achieve similar functions , we choose to use two gridPanels to simulate the candidate boxes and unselected boxes. As shown below:

Extjs4 specific method to implement data dragging function between two GridPanels_javascript skills

The definition code is as follows:

Copy the code The 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 
            columns: columns,  
            stripeRows: true,  
            title: '从业人员',  
            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:'Admin', 
 margins:'0 0 0 3'
        }
 

In this way, we can store the data in the corresponding store when dragging, and retrieve the data from the store when needed.