ExtJs 4 Border Layout: Change Margins After Render

Posted By Vitaliy | March 19, 2013 | ExtJS 4.1.1
0 4389
​There is a private property margin$ which we can change and update layout.

Js Code

{
    text: 'Increment Margin',
    handler: function () {
        var root = this.up('#root'),
            west = root.down('#west'),
            center = root.down('#center'),
            wm = west.margin$,
            cm = center.margin$;

        if (wm.top <= 10) wm.top++;
        if (wm.right <= 10) wm.right++;
        if (wm.bottom <= 10) wm.bottom++;
        if (wm.left <= 10) wm.left++;

        if (cm.top <= 10) cm.top++;
        if (cm.right <= 10) cm.right++;
        if (cm.bottom <= 10) cm.bottom++;
        if (cm.left <= 10) cm.left++;

        root.doLayout();
    }
}
            

ExtJS 4 Drag and Drop Between Two Grids with Custom Logic

Posted By Vitaliy | February 27, 2013 | ExtJS 4.1.1
0 4966
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 4 Drag and Drop Between Two Grids

Posted By Vitaliy | February 27, 2013 | ExtJS 4.1.1
0 3943
​Use dragGroup and dropGroup config options to set up Drag/DropZones.

Js Code

{
    title: 'Products',
    xtype: 'grid',
    ...
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragGroup: 'list',
            dropGroup: 'order'
        }
    },
    ...
}
...
{
    title: 'Order',
    xtype: 'grid',
    ...
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragGroup: 'order',
            dropGroup: 'list'
        }
    },
    ...
}