ExtJS 4 Drag and Drop Between Two Grids with Custom Logic

Posted By Vitaliy | February 27, 2013 | ExtJS 4.1.1
0 4460
We can override Ext.grid.ViewDropZone method handleNodeDrop to add custom events.
Then we can use these events to implement custom logic.

Tip: Try to select all products and drop to order.

Js Code

Ext.override(Ext.grid.ViewDropZone, {
    handleNodeDrop: function (data, record, position) {
        var me = this,
            view = me.view,
            store = view.getStore(),
            index, records, i, len;

        if (data.copy) {
            records = data.records;
            data.records = [];
            for (i = 0, len = records.length; i < len; i++) {
                data.records.push(records[i].copy(records[i].getId()));
            }
        } else {
            Ext.each(data.records, function (r) {
                if (data.view.fireEvent('dndbeforeremove', r) === false) return;
                data.view.store.remove(r, data.view === view);
            });
        }

        index = store.indexOf(record);

        if (position !== 'before') {
            index++;
        }

        Ext.each(data.records, function (r) {
            if (me.view.fireEvent('dndbeforeadd', r) === false) return;
            store.insert(index++, r);
        });
    }
});
            

ExtJs 3.4.0 Grid Multiselect

Posted By Vitaliy | February 26, 2013 | ExtJS 3.4.0
1 3899
ExtJs 3 Grid has multiselect feature by default.

Js Code

new Ext.grid.GridPanel({
    title: 'Users',
    store: new Ext.data.JsonStore({
        fields: ['id', 'name'],
        data: [
            { 'id': 1, 'name': 'user-1' },
            { 'id': 2, 'name': 'user-2' },
            { 'id': 3, 'name': 'user-3' },
            { 'id': 4, 'name': 'user-4' }
        ]
    }),
    columns: [
        { header: 'id', dataIndex: 'id' },
        { header: 'name', dataIndex: 'name' }
    ],
    width: 300,
    height: 150,
    renderTo: Ext.getBody()
});