extjs4.0 ---Grid To Grid 드래그 예

<br><br>	Ext.require([<br>	    'Ext.grid.*',<br>	    'Ext.data.*',<br>	    'Ext.dd.*'<br>	]);<br><br>	Ext.define('DataObject', {<br>	    extend: 'Ext.data.Model',<br>	    fields: ['name', 'column1', 'column2']<br>	});<br><br>	Ext.onReady(function(){<br><br>	    var myData = [<br>	        { name : " ", column1 : "25", column2 : "3" },<br>	        { name : " ", column1 : "24", column2 : "2" },<br>	        { name : " ", column1 : "23", column2 : "3" },<br>	        { name : " ", column1 : "25", column2 : "3" },<br>	        { name : " ", column1 : "24", column2 : "3" }<br>	    ];<br><br>	    // create the data store<br>	    var firstGridStore = Ext.create('Ext.data.Store', {<br>	        model: 'DataObject',<br>	        data: myData<br>	    });<br><br><br>	    // Column Model shortcut array<br>	    var columns = [<br>	        {text: " ", flex: 1, sortable: true, dataIndex: 'name'},<br>	        {text: " ", width: 70, sortable: true, dataIndex: 'column1'},<br>	        {text: " ", width: 70, sortable: true, dataIndex: 'column2'}<br>	    ];<br><br>	    // declare the source Grid<br>	    var firstGrid = Ext.create('Ext.grid.Panel', {<br>	        multiSelect: true,<br>	        viewConfig: {<br>	            plugins: {<br>	                ptype: 'gridviewdragdrop',<br>	                dragGroup: 'firstGridDDGroup',<br>	                dropGroup: 'secondGridDDGroup'<br>	            },<br>	            listeners: {<br>	                drop: function(node, data, dropRec, dropPosition) {<br>	                    var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';<br>	                    //Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);<br>	                }<br>	            }<br>	        },<br>	        store            : firstGridStore,<br>	        columns          : columns,<br>	        stripeRows       : true,<br>	        title            : ' ',<br>	        margins          : '0 2 0 0'<br>	    });<br><br>	    var secondGridStore = Ext.create('Ext.data.Store', {<br>	        model: 'DataObject'<br>	    });<br><br>	    // create the destination Grid<br>	    var secondGrid = Ext.create('Ext.grid.Panel', {<br>	        viewConfig: {<br>	            plugins: {<br>	                ptype: 'gridviewdragdrop',<br>	                dragGroup: 'secondGridDDGroup',<br>	                dropGroup: 'firstGridDDGroup'<br>	            },<br>	            listeners: {<br>	                drop: function(node, data, dropRec, dropPosition) {<br>	                    var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';<br>	                    //Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);<br>	                }<br>	            }<br>	        },<br>	        store            : secondGridStore,<br>	        columns          : columns,<br>	        stripeRows       : true,<br>	        title            : ' ',<br>	        margins          : '0 0 0 3'<br>	    });<br><br>	    //Simple 'border layout' panel to house both grids<br>	    var displayPanel = Ext.create('Ext.Panel', {<br>	        width        : 650,<br>	        height       : 300,<br>	        layout       : {<br>	            type: 'hbox',<br>	            align: 'stretch',<br>	            padding: 5<br>	        },<br>	        renderTo: Ext.getBody(),<br>	        defaults     : { flex : 1 }, //auto stretch<br>	        items        : [<br>	            firstGrid,<br>	            secondGrid<br>	        ],<br>	        dockedItems: {<br>	            xtype: 'toolbar',<br>	            dock: 'bottom',<br>	            items: ['->', // Fill<br>	            {<br>	                text: ' ',<br>	                handler: function(){<br>	                    firstGridStore.removeAll();<br>	                    secondGridStore.loadData(myData);<br><br>	                }<br>	            },{<br>	                text: ' ',<br>	                handler: function(){<br>	                    firstGridStore.loadData(myData);<br>	                    secondGridStore.removeAll();<br>	                }<br>	            }]<br>	        }<br>	    });<br>	});<br><br>