- 网格到网格拖放
使用拖放插件: gridviewdragdrop
<!DOCTYPE html>
<html>
<head>
<link
href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css"
rel="stylesheet"
/>
<script src="./ext-6.0.0-gpl/ext-6.0.0/build/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", mapping: "name" },
{ name: "age", mapping: "age" },
{ name: "marks", mapping: "marks" },
],
});
Ext.onReady(function () {
// Store data
var myData = [
{ name: "Asha", age: "16", marks: "90" },
{ name: "Vinit", age: "18", marks: "95" },
{ name: "Anand", age: "20", marks: "68" },
{ name: "Niharika", age: "21", marks: "86" },
{ name: "Manali", 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: 0.5,
sortable: true,
},
{
header: "Marks",
dataIndex: "marks",
flex: 0.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: 0.5,
sortable: true,
},
{
header: "Marks",
dataIndex: "marks",
flex: 0.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>
运行结果：
- 网格到表单拖放
<!DOCTYPE html>
<html>
<head>
<link
href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css"
rel="stylesheet"
/>
<script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
<script type="text/javascript">
Ext.require(["*"]);
Ext.onReady(function () {
// 存储数据
var myData = [ //定义学生数据
{ name: "Asha", age: "16", marks: "90" },
{ name: "Vinit", age: "18", marks: "95" },
{ name: "Anand", age: "20", marks: "68" },
{ name: "Niharika", age: "21", marks: "86" },
{ name: "Manali", age: "22", marks: "57" },
];
// 创建数据模型
Ext.define("StudentDataModel", {
extend: "Ext.data.Model",
fields: [
{ name: "name", mapping: "name" },
{ name: "age", mapping: "age" },
{ name: "marks", mapping: "marks" },
],
});
// 创建网格存储
var gridStore = Ext.create("Ext.data.Store", {
model: "StudentDataModel",
data: myData,
});
// 创建第一个网格
var grid = Ext.create("Ext.grid.Panel", {
viewConfig: {
plugins: {
ddGroup: "GridExample",
ptype: "gridviewdragdrop",
enableDrop: false,
},
},
enableDragDrop: true,
stripeRows: true,
width: 300,
margins: "0 2 0 0",
region: "west",
title: "Student Data Grid",
selModel: Ext.create("Ext.selection.RowModel", {
singleSelect: true,
}),
store: gridStore,
columns: [
{
header: "Student Name",
dataIndex: "name",
id: "name",
flex: 1,
sortable: true,
},
{
header: "Age",
dataIndex: "age",
flex: 0.5,
sortable: true,
},
{
header: "Marks",
dataIndex: "marks",
flex: 0.5,
sortable: true,
},
],
});
// 创建窗体面板
var formPanel = Ext.create("Ext.form.Panel", {
region: "center",
title: "Generic Form Panel",
bodyStyle: "padding: 10px; background-color: #DFE8F6",
labelWidth: 100,
width: 300,
margins: "0 0 0 3",
items: [
{
xtype: "textfield",
fieldLabel: "Student Name",
name: "name",
},
{
xtype: "textfield",
fieldLabel: "Age",
name: "age",
},
{
xtype: "textfield",
fieldLabel: "Marks",
name: "marks",
},
],
});
// 创建同时显示网格和窗体的显示面板
var displayPanel = Ext.create("Ext.Panel", {
width: 600,
height: 200,
layout: "border",
renderTo: "panel",
bodyPadding: "5",
items: [grid, formPanel],
bbar: [
"->",
{
text: "Reset",
handler: function () {
gridStore.loadData(myData);
formPanel.getForm().reset();
},
},
],
});
var formPanelDropTargetEl = formPanel.body.dom;
//为drop创建tager变量
var formPanelDropTarget = Ext.create(
"Ext.dd.DropTarget",
formPanelDropTargetEl,
{
ddGroup: "GridExample",
notifyEnter: function (ddSource, e, data) {
formPanel.body.stopAnimation();
formPanel.body.highlight();
},
notifyDrop: function (ddSource, e, data) {
var selectedRecord = ddSource.dragData.records[0];
formPanel.getForm().loadRecord(selectedRecord);
ddSource.view.store.remove(selectedRecord);
return true;
},
}
);
});
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>
运行结果：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。