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

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. Ext.onReady(function(){
  8.     var myData = {
  9. records : [
  10. { name : "Record 0", column1 : "0", column2 : "0" },
  11. { name : "Record 1", column1 : "1", column2 : "1" },
  12. { name : "Record 2", column1 : "2", column2 : "2" },
  13. { name : "Record 3", column1 : "3", column2 : "3" },
  14. { name : "Record 4", column1 : "4", column2 : "4" },
  15. { name : "Record 5", column1 : "5", column2 : "5" },
  16. { name : "Record 6", column1 : "6", column2 : "6" },
  17. { name : "Record 7", column1 : "7", column2 : "7" },
  18. { name : "Record 8", column1 : "8", column2 : "8" },
  19. { name : "Record 9", column1 : "9", column2 : "9" }
  20. ]
  21. };
  22. // Generic fields array to use in both store defs.
  23. var fields = [
  24.    {name: 'name', mapping : 'name'},
  25.    {name: 'column1', mapping : 'column1'},
  26.    {name: 'column2', mapping : 'column2'}
  27. ];
  28.     // create the data store
  29.     var gridStore = new Ext.data.JsonStore({
  30.         fields : fields,
  31. data   : myData,
  32. root   : 'records'
  33.     });
  34. // Column Model shortcut array
  35. var cols = [
  36. { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
  37. {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
  38. {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
  39. ];
  40. // declare the source Grid
  41.     var grid = new Ext.grid.GridPanel({
  42. ddGroup          : 'gridDDGroup',
  43.         store            : gridStore,
  44.         columns          : cols,
  45. enableDragDrop   : true,
  46.         stripeRows       : true,
  47.         autoExpandColumn : 'name',
  48.         width            : 325,
  49. region           : 'west',
  50.         title            : 'Data Grid',
  51. selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
  52.     });
  53. // Declare the text fields.  This could have been done inline, is easier to read
  54. // for folks learning :)
  55. var textField1 = new Ext.form.TextField({
  56. fieldLabel : 'Record Name',
  57. name       : 'name'
  58. });
  59. var textField2 = new Ext.form.TextField({
  60. fieldLabel : 'Column 1',
  61. name       : 'column1'
  62. });
  63. var textField3 = new Ext.form.TextField({
  64. fieldLabel : 'Column 2',
  65. name       : 'column2'
  66. });
  67. // Setup the form panel
  68. var formPanel = new Ext.form.FormPanel({
  69. region     : 'center',
  70. title      : 'Generic Form Panel',
  71. bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
  72. labelWidth : 100,
  73. width      : 325,
  74. items      : [
  75. textField1,
  76. textField2,
  77. textField3
  78. ]
  79. });
  80. //Simple 'border layout' panel to house both grids
  81. var displayPanel = new Ext.Panel({
  82. width    : 650,
  83. height   : 300,
  84. layout   : 'border',
  85. renderTo : 'panel',
  86. items    : [
  87. grid,
  88. formPanel
  89. ],
  90. bbar    : [
  91. '->', // Fill
  92. {
  93. text    : 'Reset Example',
  94. handler : function() {
  95. //refresh source grid
  96. gridStore.loadData(myData);
  97. formPanel.getForm().reset();
  98. }
  99. }
  100. ]
  101. });
  102. // used to add records to the destination stores
  103. var blankRecord =  Ext.data.Record.create(fields);
  104. /****
  105. * Setup Drop Targets
  106. ***/
  107. // This will make sure we only drop to the view container
  108. var formPanelDropTargetEl =  formPanel.body.dom;
  109. var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
  110. ddGroup     : 'gridDDGroup',
  111. notifyEnter : function(ddSource, e, data) {
  112. //Add some flare to invite drop.
  113. formPanel.body.stopFx();
  114. formPanel.body.highlight();
  115. },
  116. notifyDrop  : function(ddSource, e, data){
  117. // Reference the record (single selection) for readability
  118. var selectedRecord = ddSource.dragData.selections[0];
  119. // Load the record into the form
  120. formPanel.getForm().loadRecord(selectedRecord);
  121. // Delete record from the grid.  not really required.
  122. ddSource.grid.store.remove(selectedRecord);
  123. return(true);
  124. }
  125. });
  126. });