ExtJS - Drag column header to other grid

Question

I need keep the default feature of reordering columns and add possibility drop the column in a second grid, building in the last a list with the columns of first grid.

I hope has been clear.

Answer 1

I solved the issue extending DropZone. This implementation receive as constructor param the target grid, and this, be in the rbar (docked control) of source grid. The key is set ddGroup to "header-dd-zone-" plus id from source grid. I hope this is useful.

Ext.define('Crud.FilterDropZone', {
    extend: 'Ext.dd.DropZone'

    , constructor: function() {}

    , init: function (grid) {
        var me = this;

        if (grid.rendered) {
            me.grid = grid;
            me.ddGroup = 'header-dd-zone-' + grid.up('grid').id;
            grid.getView().on({
                render: function(v) {
                    me.view = v;
                    Crud.FilterDropZone.superclass.constructor.call(me, me.view.el);
                },
                single: true
            });
        } else {
            grid.on('render', me.init, me, {single: true});
        }
    }

    , getTargetFromEvent: function (e) {
        return {};
    }

    , onNodeDrop: function (nodeData, source, e, data) {
        var header = data.header
            , store = Ext.getCmp(e.target.id).getStore();

        //store.add(new store.RecordType({ property: header.text, value: '', reference: header.dataIndex}));
        store.add([[header.text, '', header.dataIndex]]);
    }

});