Home  >  Article  >  Web Front-end  >  Extjs4 specific method to implement data dragging function between two GridPanels_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 17:13:25970browse

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.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn