サラリーマンのすらすらＩＴ日記

Ext JS Sencha Docsのページから、一番右のタブをクリックすると、Examplesの画面が開きます。



そこからGrid to Grid DnDを選択すると、実行時の画面とコードの両方が表示されます。これは便利です。



ドラッグ＆ドロップの箇所はこの辺りです。

this.items = [{
  itemId: 'grid1',
  flex: 1,
  xtype: 'grid',
  multiSelect: true,
  viewConfig: {
    plugins: {
      ptype: 'gridviewdragdrop',
      dragGroup: group1,
      dropGroup: group2
    },
    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);
       }
    }
  },

gridのconfigにviewConfigを書き、その中にpluginsでptype: 'gridviewdragdrop'を書いて、dragGroupとdropGroupを書くだけというわかりやすいコードです。ちなみにtreeでドラッグ＆ドロップする時は、ptype: 'treeviewdragdrop'と書くようです。Ext JS 3の時より随分簡単になりました。