add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / dd / GridToGrid.js

/**\r
 * This example shows how to setup two way drag and drop from one GridPanel to another.\r
 */\r
Ext.define('KitchenSink.view.dd.GridToGrid', {\r
    extend: 'Ext.container.Container',\r
    \r
    requires: [\r
        'Ext.grid.*',\r
        'Ext.layout.container.HBox',\r
        'KitchenSink.model.dd.Simple'\r
    ],    \r
    xtype: 'dd-grid-to-grid',\r
    \r
    //<example>\r
    exampleTitle: 'Drag and Drop from Grid to Grid Example',\r
    otherContent: [{\r
        type: 'Model',\r
        path: 'classic/samples/model/dd/Simple.js'\r
    }],\r
    //</example>\r
    \r
    width: 650,\r
    height: 300,\r
    layout: {\r
        type: 'hbox',\r
        align: 'stretch',\r
        padding: 5\r
    },\r
    \r
    myData: [\r
        { name : 'Rec 0', column1 : '0', column2 : '0' },\r
        { name : 'Rec 1', column1 : '1', column2 : '1' },\r
        { name : 'Rec 2', column1 : '2', column2 : '2' },\r
        { name : 'Rec 3', column1 : '3', column2 : '3' },\r
        { name : 'Rec 4', column1 : '4', column2 : '4' },\r
        { name : 'Rec 5', column1 : '5', column2 : '5' },\r
        { name : 'Rec 6', column1 : '6', column2 : '6' },\r
        { name : 'Rec 7', column1 : '7', column2 : '7' },\r
        { name : 'Rec 8', column1 : '8', column2 : '8' },\r
        { name : 'Rec 9', column1 : '9', column2 : '9' }\r
    ],\r
    \r
    initComponent: function(){\r
        var group1 = this.id + 'group1',\r
            group2 = this.id + 'group2',\r
            columns = [{\r
                text: 'Record Name', \r
                flex: 1, \r
                sortable: true, \r
                dataIndex: 'name'\r
            }, {\r
                text: 'column1', \r
                width: 80, \r
                sortable: true, \r
                dataIndex: 'column1'\r
            }, {\r
                text: 'column2', \r
                width: 80, \r
                sortable: true, \r
                dataIndex: 'column2'\r
            }];\r
            \r
        this.items = [{\r
            itemId: 'grid1',\r
            flex: 1,\r
            xtype: 'grid',\r
            multiSelect: true,\r
                viewConfig: {\r
                plugins: {\r
                    ptype: 'gridviewdragdrop',\r
                    containerScroll: true,\r
                    dragGroup: group1,\r
                    dropGroup: group2\r
                },\r
                listeners: {\r
                    drop: function(node, data, dropRec, dropPosition) {\r
                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';\r
                        Ext.example.msg('Drag from right to left', 'Dropped ' + data.records[0].get('name') + dropOn);\r
                    }\r
                }\r
            },\r
            store: new Ext.data.Store({\r
                model: KitchenSink.model.dd.Simple,\r
                data: this.myData\r
            }),\r
            columns: columns,\r
            title: 'First Grid',\r
            tools: [{\r
                type: 'refresh',\r
                tooltip: 'Reset both grids',\r
                scope: this,\r
                handler: this.onResetClick\r
            }],\r
            margin: '0 5 0 0'\r
        }, {\r
            itemId: 'grid2',\r
            flex: 1,\r
            xtype: 'grid',\r
            viewConfig: {\r
                plugins: {\r
                    ptype: 'gridviewdragdrop',\r
                    containerScroll: true,\r
                    dragGroup: group2,\r
                    dropGroup: group1\r
                },\r
                listeners: {\r
                    drop: function(node, data, dropRec, dropPosition) {\r
                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';\r
                        Ext.example.msg('Drag from left to right', 'Dropped ' + data.records[0].get('name') + dropOn);\r
                    }\r
                }\r
            },\r
            store: new Ext.data.Store({\r
                model: KitchenSink.model.dd.Simple\r
            }),\r
            columns: columns,\r
            stripeRows: true,\r
            title: 'Second Grid'\r
        }];\r
\r
        this.callParent();\r
    },\r
    \r
    onResetClick: function(){\r
        //refresh source grid\r
        this.down('#grid1').getStore().loadData(this.myData);\r
\r
        //purge destination grid\r
        this.down('#grid2').getStore().removeAll();\r
    }\r
});\r