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.

I need to create a DropZone in another grid that receive the drag of column header from first grid, keeping the default reorder columns feature from the last grid. I'm extending the DropZone and think that I'm on the right way. — hesenger, Apr 17 '13 at 14:27

score 1 · Accepted Answer · answered Apr 19 '13 at 12:33

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]]);
    }

});

ExtJS - Drag column header to other grid

1 Answers1