In this Ext.js Grid to form With the help of drag and drop plugin, we can drag data from one grid and drop it to form fields.
The following example shows that we can drag data from a grid and drop it to a form. Here, we have a reset button to reset data in both the form and the grid.
Example
Following is a simple example showing Drag and Drop grid to form.
<!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.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 data model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
// Creation of grid store
var gridStore = Ext.create('Ext.data.Store', {
model : 'StudentDataModel',
data : myData
});
// Creation of first grid
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: .5,
sortable: true
},{
header: "Marks",
dataIndex: 'marks',
flex: .5,
sortable: true
}]
});
// Creation of form panel
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'
}]
});
// Creation of display panel for showing both grid and form
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;
//Creation of tager variable for drop.
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>
The above program will produce the following result −
Next Topic : Click Here