课程表

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.grid.*',
  9.          'Ext.data.*',
  10.          'Ext.dd.*'
  11.       ]);
  12.       // Creation of data model
  13.       Ext.define('StudentDataModel', {
  14.          extend: 'Ext.data.Model',
  15.          fields: [
  16.          {name: 'name', mapping : 'name'},
  17.          {name: 'age', mapping : 'age'},
  18.          {name: 'marks', mapping : 'marks'}
  19.          ]
  20.       });
  22.       Ext.onReady(function(){
  23.          // Store data
  24.          var myData = [
  25.             { name : "Asha", age : "16", marks : "90" },
  26.             { name : "Vinit", age : "18", marks : "95" },
  27.             { name : "Anand", age : "20", marks : "68" },
  28.             { name : "Niharika", age : "21", marks : "86" },
  29.             { name : "Manali", age : "22", marks : "57" }
  30.          ];
  31.          // Creation of first grid store
  32.          var firstGridStore = Ext.create('Ext.data.Store', {
  33.          model: 'StudentDataModel',
  34.          data: myData
  35.          });
  36.          // Creation of first grid
  37.          var firstGrid = Ext.create('Ext.grid.Panel', {
  38.             multiSelect: true,
  39.             viewConfig: {
  40.                plugins: {
  41.                   ptype: 'gridviewdragdrop',
  42.                   dragGroup: 'firstGridDDGroup',
  43.                   dropGroup: 'secondGridDDGroup'
  44.                },
  45.                listeners: {
  46.                   drop: function(node, data, dropRec, dropPosition) {
  47.                      var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
  48.                   }
  49.                }
  50.             },
  51.             store            : firstGridStore,
  52.             columns          :
  53.                [{ 
  54.                   header: "Student Name",
  55.                   dataIndex: 'name',	
  56.                   id : 'name',    
  57.                   flex:  1,  			
  58.                sortable: true
  59.                },{
  60.                   header: "Age", 
  61.                   dataIndex: 'age',
  62.                   flex: .5, 
  63.                   sortable: true
  64.                },{
  65.                   header: "Marks",
  66.                   dataIndex: 'marks',
  67.                   flex: .5, 
  68.                   sortable: true
  69.                }],
  70.             stripeRows       : true,
  71.             title            : 'First Grid',
  72.             margins          : '0 2 0 0'
  73.          });
  74.          // Creation of second grid store
  75.          var secondGridStore = Ext.create('Ext.data.Store', {
  76.             model: 'StudentDataModel'
  77.          });
  78.          // Creation of second grid
  79.          var secondGrid = Ext.create('Ext.grid.Panel', {
  80.             viewConfig: {
  81.                plugins: {
  82.                   ptype: 'gridviewdragdrop',
  83.                   dragGroup: 'secondGridDDGroup',
  84.                   dropGroup: 'firstGridDDGroup'
  85.                },
  86.                listeners: {
  87.                   drop: function(node, data, dropRec, dropPosition) {
  88.                      var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
  89.                   }
  90.                }
  91.             },
  92.             store            : secondGridStore,
  93.             columns          : 
  94.             [{ 
  95.                header: "Student Name",
  96.                dataIndex: 'name',	
  97.                id : 'name',    
  98.                flex:  1,  			
  99.                sortable: true
  100.             },{
  101.                header: "Age", 
  102.                dataIndex: 'age',
  103.                flex: .5, 
  104.                sortable: true
  105.             },{
  106.                header: "Marks",
  107.                dataIndex: 'marks',
  108.                flex: .5, 
  109.                sortable: true
  110.             }],
  111.             stripeRows       : true,
  112.             title            : 'Second Grid',
  113.             margins          : '0 0 0 3'
  114.          });
  115.          // Creation of a panel to show both the grids.
  116.          var displayPanel = Ext.create('Ext.Panel', {
  117.             width        : 600,
  118.             height       : 200,
  119.             layout       : {
  120.                type: 'hbox',
  121.                align: 'stretch',
  122.                padding: 5
  123.             },
  124.             renderTo     : 'panel',
  125.             defaults     : { flex : 1 }, 
  126.             items        : [
  127.                firstGrid,
  128.                secondGrid
  129.             ],
  130.             dockedItems: {
  131.                xtype: 'toolbar',
  132.                dock: 'bottom',
  133.                items: ['->', 
  134.                {
  135.                   text: 'Reset both grids',
  136.                   handler: function(){
  137.                      firstGridStore.loadData(myData);
  138.                      secondGridStore.removeAll();
  139.                   }
  140.                }]
  141.             }
  142.          });
  143.       });
  144.    </script>
  145. </head>
  146. <body>
  147. <div id = "panel" > </div>
  148. </body>
  149. </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号