dnd_grid_to_grid.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:5k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onReady(function(){
  2.     var myData = {
  3. records : [
  4. { name : "Rec 0", column1 : "0", column2 : "0" },
  5. { name : "Rec 1", column1 : "1", column2 : "1" },
  6. { name : "Rec 2", column1 : "2", column2 : "2" },
  7. { name : "Rec 3", column1 : "3", column2 : "3" },
  8. { name : "Rec 4", column1 : "4", column2 : "4" },
  9. { name : "Rec 5", column1 : "5", column2 : "5" },
  10. { name : "Rec 6", column1 : "6", column2 : "6" },
  11. { name : "Rec 7", column1 : "7", column2 : "7" },
  12. { name : "Rec 8", column1 : "8", column2 : "8" },
  13. { name : "Rec 9", column1 : "9", column2 : "9" }
  14. ]
  15. };
  16. // Generic fields array to use in both store defs.
  17. var fields = [
  18.    {name: 'name', mapping : 'name'},
  19.    {name: 'column1', mapping : 'column1'},
  20.    {name: 'column2', mapping : 'column2'}
  21. ];
  22.     // create the data store
  23.     var firstGridStore = new Ext.data.JsonStore({
  24.         fields : fields,
  25. data   : myData,
  26. root   : 'records'
  27.     });
  28. // Column Model shortcut array
  29. var cols = [
  30. { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
  31. {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
  32. {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
  33. ];
  34. // declare the source Grid
  35.     var firstGrid = new Ext.grid.GridPanel({
  36. ddGroup          : 'secondGridDDGroup',
  37.         store            : firstGridStore,
  38.         columns          : cols,
  39. enableDragDrop   : true,
  40.         stripeRows       : true,
  41.         autoExpandColumn : 'name',
  42.         width            : 325,
  43. region           : 'west',
  44.         title            : 'First Grid'
  45.     });
  46.     var secondGridStore = new Ext.data.JsonStore({
  47.         fields : fields,
  48. root   : 'records'
  49.     });
  50.     // create the destination Grid
  51.     var secondGrid = new Ext.grid.GridPanel({
  52. ddGroup          : 'firstGridDDGroup',
  53.         store            : secondGridStore,
  54.         columns          : cols,
  55. enableDragDrop   : true,
  56.         stripeRows       : true,
  57.         autoExpandColumn : 'name',
  58.         width            : 325,
  59. region           : 'center',
  60.         title            : 'Second Grid'
  61.     });
  62. //Simple 'border layout' panel to house both grids
  63. var displayPanel = new Ext.Panel({
  64. width    : 650,
  65. height   : 300,
  66. layout   : 'border',
  67. renderTo : 'panel',
  68. items    : [
  69. firstGrid,
  70. secondGrid
  71. ],
  72. bbar    : [
  73. '->', // Fill
  74. {
  75. text    : 'Reset both grids',
  76. handler : function() {
  77. //refresh source grid
  78. firstGridStore.loadData(myData);
  79. //purge destination grid
  80. secondGridStore.removeAll();
  81. }
  82. }
  83. ]
  84. });
  85. // used to add records to the destination stores
  86. var blankRecord =  Ext.data.Record.create(fields);
  87. /****
  88. * Setup Drop Targets
  89. ***/
  90. // This will make sure we only drop to the view container
  91. var firstGridDropTargetEl =  firstGrid.getView().el.dom.childNodes[0].childNodes[1];
  92. var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
  93. ddGroup    : 'firstGridDDGroup',
  94. copy       : true,
  95. notifyDrop : function(ddSource, e, data){
  96. // Generic function to add records.
  97. function addRow(record, index, allItems) {
  98. // Search for duplicates
  99. var foundItem = firstGridStore.findExact('name', record.data.name);
  100. // if not found
  101. if (foundItem  == -1) {
  102. firstGridStore.add(record);
  103. // Call a sort dynamically
  104. firstGridStore.sort('name', 'ASC');
  105. //Remove Record from the source
  106. ddSource.grid.store.remove(record);
  107. }
  108. }
  109. // Loop through the selections
  110. Ext.each(ddSource.dragData.selections ,addRow);
  111. return(true);
  112. }
  113. });
  114. // This will make sure we only drop to the view container
  115. var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
  116. var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
  117. ddGroup    : 'secondGridDDGroup',
  118. copy       : false,
  119. notifyDrop : function(ddSource, e, data){
  120. // Generic function to add records.
  121. function addRow(record, index, allItems) {
  122. // Search for duplicates
  123. var foundItem = secondGridStore.findExact('name', record.data.name);
  124. // if not found
  125. if (foundItem  == -1) {
  126. secondGridStore.add(record);
  127. // Call a sort dynamically
  128. secondGridStore.sort('name', 'ASC');
  129. //Remove Record from the source
  130. ddSource.grid.store.remove(record);
  131. }
  132. }
  133. // Loop through the selections
  134. Ext.each(ddSource.dragData.selections ,addRow);
  135. return(true);
  136. }
  137. });
  138. });