1
A
回答
1
下面的解释程序将工作阻力和两个电网之间
下降<!DOCTYPE html>
<html>
<head>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
rel="stylesheet" />
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]);
// Creation of data model
Ext.define('StudentDataModel', {
extend : 'Ext.data.Model',
fields : [ {
name : 'name',//Name of the column
mapping : 'name'//Name to map the columns
},
{
name : 'age',
mapping : 'age'
}, {
name : 'marks',
mapping : 'marks'
} ]
});
Ext.onReady(function() {
// Store data
var myData = [ {
name : "Smith",
age : "20",
marks : "90"
}, {
name : "Alen",
age : "18",
marks : "95"
}, {
name : "Mike",
age : "20",
marks : "68"
}, {
name : "Jon",
age : "21",
marks : "86"
}, {
name : "Keven",
age : "22",
marks : "57"
} ];
// Creation of first grid store
var firstGridStore = Ext.create('Ext.data.Store', {
model : 'StudentDataModel',
data : myData
});
// Creation of first grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect : true,
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : 'firstGridDDGroup',
dropGroup : 'secondGridDDGroup'
},
listeners : {
drop : function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' '
+ dropRec.get('name') : ' on empty view';
}
}
},
store : firstGridStore,
columns : [ {
header : "Student Name",
dataIndex : 'name',
id : 'name',
flex : 1,
sortable : true
}, {
header : "Age",
dataIndex : 'age',
flex : .5,
sortable : true
}, {
header : "Marks",
dataIndex : 'marks',
flex : .5,
sortable : true
} ],
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
// Creation of second grid store
var secondGridStore = Ext.create('Ext.data.Store', {
model : 'StudentDataModel'
});
// Creation of second grid
var secondGrid = Ext.create('Ext.grid.Panel', {
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : 'secondGridDDGroup',
dropGroup : 'firstGridDDGroup'
},
listeners : {
drop : function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' '
+ dropRec.get('name') : ' on empty view';
}
}
},
store : secondGridStore,
columns : [ {
header : "Student Name",
dataIndex : 'name',
id : 'name',
flex : 1,
sortable : true
}, {
header : "Age",
dataIndex : 'age',
flex : .5,
sortable : true
}, {
header : "Marks",
dataIndex : 'marks',
flex : .5,
sortable : true
} ],
stripeRows : true,
title : 'Second Grid',
margins : '0 0 0 3'
});
// Creation of a panel to show both the grids.
var displayPanel = Ext.create('Ext.Panel', {
width : 600,
height : 200,
layout : {
type : 'hbox',
align : 'stretch',
padding : 5
},
renderTo : 'panel',
defaults : {
flex : 1
},
items : [ firstGrid, secondGrid ],
dockedItems : {
xtype : 'toolbar',
dock : 'bottom',
items : [ '->', {
text : 'Reset both grids',
handler : function() {
firstGridStore.loadData(myData);
secondGridStore.removeAll();
}
} ]
}
});
});
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>
知识来自： https://www.tutorialspoint.com/extjs/extjs_drag_drop.htm
- 我创建了一个数据模型命名
StudentDataModel，其中有name,age,marks及其属性。 创建一个店叫插入内部网格
myData即数据和网格店叫firstGridStore和secondGridStore实施了
listener and plugin- 现在无论
[ firstGrid, secondGrid ]内displayPanel('Ext.Panel')
我有根据我的最佳知识解释它。我欢迎任何改变或解释即兴发挥的例子。
1
你有煎茶厨房水槽的例子 - 双向拖放从一个GridPanel中到另一个：http://examples.sencha.com/extjs/5.1.0/examples/kitchensink/#dd-grid-to-grid
此代码给了我更好的解释和理解能力，易于理解 –