--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.onReady(function(){\r
+\r
+ var myData = {\r
+ records : [\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
+\r
+\r
+ // Generic fields array to use in both store defs.\r
+ var fields = [\r
+ {name: 'name', mapping : 'name'},\r
+ {name: 'column1', mapping : 'column1'},\r
+ {name: 'column2', mapping : 'column2'}\r
+ ];\r
+\r
+ // create the data store\r
+ var firstGridStore = new Ext.data.JsonStore({\r
+ fields : fields,\r
+ data : myData,\r
+ root : 'records'\r
+ });\r
+\r
+\r
+ // Column Model shortcut array\r
+ var cols = [\r
+ { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},\r
+ {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},\r
+ {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}\r
+ ];\r
+\r
+ // declare the source Grid\r
+ var firstGrid = new Ext.grid.GridPanel({\r
+ ddGroup : 'secondGridDDGroup',\r
+ store : firstGridStore,\r
+ columns : cols,\r
+ enableDragDrop : true,\r
+ stripeRows : true,\r
+ autoExpandColumn : 'name',\r
+ width : 325,\r
+ region : 'west',\r
+ title : 'First Grid'\r
+ });\r
+\r
+ var secondGridStore = new Ext.data.JsonStore({\r
+ fields : fields,\r
+ root : 'records'\r
+ });\r
+\r
+ // create the destination Grid\r
+ var secondGrid = new Ext.grid.GridPanel({\r
+ ddGroup : 'firstGridDDGroup',\r
+ store : secondGridStore,\r
+ columns : cols,\r
+ enableDragDrop : true,\r
+ stripeRows : true,\r
+ autoExpandColumn : 'name',\r
+ width : 325,\r
+ region : 'center',\r
+ title : 'Second Grid'\r
+ });\r
+\r
+\r
+ //Simple 'border layout' panel to house both grids\r
+ var displayPanel = new Ext.Panel({\r
+ width : 650,\r
+ height : 300,\r
+ layout : 'border',\r
+ renderTo : 'panel',\r
+ items : [\r
+ firstGrid,\r
+ secondGrid\r
+ ],\r
+ bbar : [\r
+ '->', // Fill\r
+ {\r
+ text : 'Reset both grids',\r
+ handler : function() {\r
+ //refresh source grid\r
+ firstGridStore.loadData(myData);\r
+\r
+ //purge destination grid\r
+ secondGridStore.removeAll();\r
+ }\r
+ }\r
+ ]\r
+ });\r
+\r
+ // used to add records to the destination stores\r
+ var blankRecord = Ext.data.Record.create(fields);\r
+\r
+ <div id="prop-Ext.ux.TaskBar.TaskButton-This"></div>/****\r
+ * Setup Drop Targets\r
+ ***/\r
+ // This will make sure we only drop to the view container\r
+ var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];\r
+ var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {\r
+ ddGroup : 'firstGridDDGroup',\r
+ copy : true,\r
+ notifyDrop : function(ddSource, e, data){\r
+\r
+ // Generic function to add records.\r
+ function addRow(record, index, allItems) {\r
+\r
+ // Search for duplicates\r
+ var foundItem = firstGridStore.findExact('name', record.data.name);\r
+ // if not found\r
+ if (foundItem == -1) {\r
+ firstGridStore.add(record);\r
+\r
+ // Call a sort dynamically\r
+ firstGridStore.sort('name', 'ASC');\r
+\r
+ //Remove Record from the source\r
+ ddSource.grid.store.remove(record);\r
+ }\r
+ }\r
+\r
+ // Loop through the selections\r
+ Ext.each(ddSource.dragData.selections ,addRow);\r
+ return(true);\r
+ }\r
+ });\r
+\r
+\r
+ // This will make sure we only drop to the view container\r
+ var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]\r
+\r
+ var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {\r
+ ddGroup : 'secondGridDDGroup',\r
+ copy : false,\r
+ notifyDrop : function(ddSource, e, data){\r
+\r
+ // Generic function to add records.\r
+ function addRow(record, index, allItems) {\r
+\r
+ // Search for duplicates\r
+ var foundItem = secondGridStore.findExact('name', record.data.name);\r
+ // if not found\r
+ if (foundItem == -1) {\r
+ secondGridStore.add(record);\r
+ // Call a sort dynamically\r
+ secondGridStore.sort('name', 'ASC');\r
+\r
+ //Remove Record from the source\r
+ ddSource.grid.store.remove(record);\r
+ }\r
+ }\r
+ // Loop through the selections\r
+ Ext.each(ddSource.dragData.selections ,addRow);\r
+ return(true);\r
+ }\r
+ });\r
+});\r
+</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff