快捷導(dǎo)航

Extjs4實現(xiàn)兩個GridPanel之間數(shù)據(jù)拖拽功能具體方法

更新時間：2013年11月21日 14:45:35 作者：

這篇文章主要介紹了Extjs4實現(xiàn)兩個GridPanel之間數(shù)據(jù)拖拽功能具體方法，有需要的朋友可以參考一下

1、之前在winForm上有看過在選擇數(shù)據(jù)時會將一些數(shù)據(jù)放在待選框中，而用戶可以將想要選擇的數(shù)據(jù)放到備選框中，那么如何用Extjs實現(xiàn)類似功能，我們選擇用兩個gridPanel來模擬其中的備選框和待選框。如下圖所示：

定義代碼如下：

復(fù)制代碼代碼如下:

         {
               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, //加載數(shù)據(jù)的store 
            columns: columns,  
            stripeRows: true,  
            title: '從業(yè)人員',  
            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:'管理員',  
          margins:'0 0 0 3'
           }