将行拖放到列

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代理将拉动家居网格/表格行中，是否显示或隐藏。 。

希望这会有帮助