课程表

Ext.js课程

工具箱
速查手册

Ext.js 网格到表单拖放

当前位置：免费教程 » JS/JS库/框架 » Ext.js

描述

在拖放插件的帮助下，我们可以从一个网格拖动数据，并可以将其拖放到表单字段。
下面提到的示例显示，我们可以从网格中拖动数据，并将其拖放到这里，我们有复位按钮在窗体和网格中重置数据。

例

下面是一个简单的例子，显示拖放网格到窗体。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
  5.    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
  6.    <script type="text/javascript">	 
  7.       Ext.require(['*']);
  8.       Ext.onReady(function(){
  9.          // Store data
  10.          var myData = [
  11.             { name : "Asha", age : "16", marks : "90" },
  12.             { name : "Vinit", age : "18", marks : "95" },
  13.             { name : "Anand", age : "20", marks : "68" },
  14.             { name : "Niharika", age : "21", marks : "86" },
  15.             { name : "Manali", age : "22", marks : "57" }
  16.          ];
  17.          // Creation of data model
  18.          Ext.define('StudentDataModel', {
  19.             extend: 'Ext.data.Model',
  20.             fields: [
  21.                {name: 'name', mapping : 'name'},
  22.                {name: 'age', mapping : 'age'},
  23.                {name: 'marks', mapping : 'marks'}
  24.             ]
  25.          });
  26.           // Creation of grid store
  27.          var gridStore = Ext.create('Ext.data.Store', {
  28.             model  : 'StudentDataModel',
  29.             data   : myData
  30.          });
  31.          // Creation of first grid
  32.          var grid = Ext.create('Ext.grid.Panel', {
  33.             viewConfig: {
  34.                plugins: {
  35.                   ddGroup: 'GridExample',
  36.                   ptype: 'gridviewdragdrop',
  37.                   enableDrop: false
  38.                }
  39.             },
  40.             enableDragDrop   : true,
  41.             stripeRows       : true,
  42.             width            : 300,
  43.             margins          : '0 2 0 0',
  44.             region           : 'west',
  45.             title            : 'Student Data Grid',
  46.             selModel         : Ext.create('Ext.selection.RowModel',{
  47.                singleSelect : true
  48.             }),
  49.             store            : gridStore,
  50.             columns          : 
  51.                [{ 
  52.                   header: "Student Name",
  53.                   dataIndex: 'name',	
  54.                   id : 'name',    
  55.                   flex:  1,  			
  56.                   sortable: true
  57.                },{
  58.                   header: "Age", 
  59.                   dataIndex: 'age',
  60.                   flex: .5, 
  61.                   sortable: true
  62.                },{
  63.                   header: "Marks",
  64.                   dataIndex: 'marks',
  65.                   flex: .5, 
  66.                   sortable: true
  67.                }]
  68.          });
  69.          // Creation of form panel
  70.          var formPanel = Ext.create('Ext.form.Panel', {
  71.             region     : 'center',
  72.             title      : 'Generic Form Panel',
  73.             bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
  74.             labelWidth : 100,
  75.             width      : 300,
  76.             margins    : '0 0 0 3',
  77.             items      : [{
  78.                xtype : 'textfield',
  79.                fieldLabel : 'Student Name',
  80.                name       : 'name'
  81.             },{
  82.                xtype : 'textfield',
  83.                fieldLabel : 'Age',
  84.                name       : 'age'
  85.             },{
  86.                xtype : 'textfield',
  87.                fieldLabel : 'Marks',
  88.                name       : 'marks'
  89.             }]
  90.          });
  91.          // Creation of display panel for showing both grid and form
  92.          var displayPanel = Ext.create('Ext.Panel', {
  93.             width    : 600,
  94.             height   : 200,
  95.             layout   : 'border',
  96.             renderTo : 'panel',
  97.             bodyPadding: '5',
  98.             items    : [grid, formPanel],
  99.             bbar    : [
  100.                '->',
  101.                {
  102.                text    : 'Reset',
  103.                handler : function() {
  104.                   gridStore.loadData(myData);
  105.                   formPanel.getForm().reset();
  106.                }
  107.             }]
  108.          });
  110.          var formPanelDropTargetEl =  formPanel.body.dom;
  111.         //Creation of tager variable for drop.
  112.          var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', formPanelDropTargetEl, {
  113.             ddGroup: 'GridExample',
  114.             notifyEnter: function(ddSource, e, data) {
  115.                formPanel.body.stopAnimation();
  116.                formPanel.body.highlight();
  117.             },
  118.             notifyDrop  : function(ddSource, e, data){
  119.                var selectedRecord = ddSource.dragData.records[0];
  120.                formPanel.getForm().loadRecord(selectedRecord);
  121.                ddSource.view.store.remove(selectedRecord);
  122.                return true;
  123.             }
  124.          });
  125.       });
  126.    </script>
  127. </head>
  128. <body>
  129.    <div id = "panel" > </div>
  130. </body>
  131. </html>

尝试一下

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号