將行拖放到列

Question

我是新來的Ext JS，我嘗試過「拖放」，當我拖動行時它工作正常。我現在正在嘗試的是從左邊的網格中拖放一行（來自MySQL的一個字段），並將它放在右側的網格上，該網格將數據庫表中的數據作爲列。

我現在使用的是代碼，

Ext.require([ 
     'Ext.grid.*', 
     'Ext.data.*', 
     'Ext.dd.*' 
    ]); 

    Ext.define('DataObject', { 
     extend: 'Ext.data.Model', 
     fields: ['Field'] 
    }); 

    Ext.onReady(function(){ 

      var firstGridStore = Ext.create('Ext.data.Store', { 
      model: 'DataObject', 

       autoLoad: true, 
       pageSize: 4, 
       proxy: { 
        type: 'ajax', 
        url : 'user.php', 
        reader: { 
        type: 'json', 
        root: 'users'    
       } 
      } 
     }); 

     // Column Model shortcut array 
     var columns = [ 
      {text: "Fields", sortable: true, width: 50, dataIndex: 'Field'} 
     ]; 

     var firstGrid = Ext.create('Ext.grid.Panel', { 
      multiSelect: true, 
      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'; 
         Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn); 
        } 
       } 
      }, 
      store   : firstGridStore, 
      columns   : columns, 
      stripeRows  : true, 
      title   : 'First Grid', 
      margins   : '0 2 0 0' 
     }); 

     var secondGridStore = Ext.create('Ext.data.Store', { 
      model: 'DataObject' 
     }); 

     // create the destination Grid 
     var secondGrid = Ext.create('Ext.grid.Panel', { 
      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'; 
         Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn); 
        } 
       } 
      }, 
      store   : secondGridStore, 
      columns   : columns, 
      stripeRows  : true, 
      title     : 'Second Grid', 
      margins    : '0 0 0 3' 
     }); 

     //Simple 'border layout' panel to house both grids 
     var displayPanel = Ext.create('Ext.Panel', { 
      layout: 'fit', 
      height  : 300, 
      layout  : { 
       type: 'hbox', 
       align: 'stretch', 
       padding: 5 
      }, 
      renderTo  : 'panel', 
      defaults  : { flex : 1 }, //auto stretch 
      items  : [ 
       firstGrid, 
       secondGrid 
      ], 
      dockedItems: { 
       xtype: 'toolbar', 
       dock: 'bottom', 
       items: ['->', // Fill 
       { 
        text: 'Reset both grids', 
        handler: function(){ 
         //refresh source grid 
         firstGridStore.loadData(myData); 

         //purge destination grid 
         secondGridStore.removeAll(); 
        } 
       }] 
      } 
     }); 
    }); 

從左電網領域應該是針對我的要求正確的網格數據的標題（來自數據庫）。

左電網將具有類似網格數據：
場
ID
名
數據
左格拖動數據，對電網應該有這樣的數據之後：
ID
注意：這裏ly id被拖拽。

有人可以幫我嗎？

謝謝。

Answer 1

您可以使用「beforedrop」而不是「drop」事件，但是您可以通過爲dropFunction屬性分配一個新函數來設置您自己的自定義拖放處理程序，希望能夠成爲一個聚光燈以幫助您解決問題！ 也看到，http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.DragDrop

Answer 2

幾件事情要記住..

1. 模型驅動的佈局 - 你定義一個字段「場」的「數據對象」，由填寫users.php JSON調用/返回，如果你希望所有從JSON回報的領域爲可拖動，然後你需要包括所有的領域模型中的即

   Ext.define('DataObject', { 
       extend: 'Ext.data.Model', 
       fields: [ 
        'id', 
        'name', 
        'data' 
       ] 
   }); 
   

2. 字段名稱必須源之間的匹配和拖放目標 - 只要您想要的拖拽字段名稱相同（數據字段定義），則您的拖拽代理將提取所有您想要的項目。

3. 當然，如果你只想要的標題顯示，那麼您的顯示將是：

   items: [ 
       { dataIndex: 'id', hidden: true } , 
       { dataIndex: 'name', hidden: true }, 
       { text: 'title', dataIndex: 'data', width: xx } // loose example 
   ] 
   

中的DragDrop代理將拉動家居網格/表格行中，是否顯示或隱藏。 。

希望這會有幫助