Drag and Drop Grid (ExtJS - 2)
Sebagai lanjutan dari tutorial Extjs sebelumnya, sekarang saya mencoba untuk menulis untuk tutorial selanjutnya yakni bagaimana membuat Drag and Drop Grid dengan Extjs. Pastikan anda sudah memiliki / mendowload Library ExtJS versi 2.2.1. Berikut langkah-langkahnya :
>> buat file dengan nama drag_grid.html ketik kode berikut :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contoh Drag and Drop antar Grid</title>
<link rel="stylesheet" type="text/css" href="ext-2.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-2.2.1/examples/shared/code-display.js"></script>
<link rel="stylesheet" type="text/css" href="ext-2.2.1/examples/shared/examples.css" />
<script type="text/javascript" src="drag_grid.js"></script>
</head>
<body>
<div id="panel"></div>
</body>
</html>
>> buat file dengan nama drag_grid.js ketik kode berikut :
Ext.onReady(function(){
var dataKu = {
records : [
{ name : "Data 1", column1 : "Isi Kolom 1", column2 : "0" },
{ name : "Data 2", column1 : "1", column2 : "Isi Kolom 2" },
{ name : "Data 3", column1 : "Isi Kolom 1", column2 : "2" },
{ name : "Data 4", column1 : "3", column2 : "Isi Kolom 2" },
{ name : "Data 5", column1 : "Isi Kolom 1", column2 : "4" },
{ name : "Data 6", column1 : "5", column2 : "Isi Kolom 2" },
{ name : "Data 7", column1 : "Isi Kolom 1", column2 : "6" },
{ name : "Data 8", column1 : "7", column2 : "Isi Kolom 2" },
{ name : "Data 9", column1 : "Isi Kolom 1", column2 : "8" },
{ name : "Data 10", column1 : "9", column2 : "Isi Kolom 2" }
]
};
// Generic fields array to use in both store defs.
var fields = [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'}
];
// create the data store
var isiGridPertama = new Ext.data.JsonStore({
fields : fields,
data : dataKu,
root : 'records'
});
// Column Model shortcut array
var cols = [
{ id : 'name', header: "Nama Data", width: 100, sortable: true, dataIndex: 'name'},
{header: "Kolom 1", width: 70, sortable: true, dataIndex: 'column1'},
{header: "Kolom 2", width: 70, sortable: true, dataIndex: 'column2'}
];
// declare the source Grid
var gridPertama = new Ext.grid.GridPanel({
ddGroup : 'gridKeduaDDGroup',
store : isiGridPertama,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 350,
region : 'west',
title : 'Grid Pertama'
});
var isiGridKedua = new Ext.data.JsonStore({
fields : fields,
root : 'records'
});
// create the destination Grid
var gridKedua = new Ext.grid.GridPanel({
ddGroup : 'gridPertamaDDGroup',
store : isiGridKedua,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 350,
region : 'center',
title : 'Grid Kedua'
});
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 700,
height : 300,
layout : 'border',
renderTo : 'panel',
items : [
gridPertama,
gridKedua
],
bbar : [
'->', // Fill
{
text : 'Reset Kedua Grid',
handler : function() {
//refresh source grid
isiGridPertama.loadData(dataKu);
//purge destination grid
isiGridKedua.removeAll();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var gridPertamaDropTargetEl = gridPertama.getView().el.dom.childNodes[0].childNodes[1];
var gridPertamaDropTarget = new Ext.dd.DropTarget(gridPertamaDropTargetEl, {
ddGroup : 'gridPertamaDDGroup',
copy : true,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = isiGridPertama.find('name', record.data.name);
// if not found
if (foundItem == -1) {
isiGridPertama.add(record);
// Call a sort dynamically
isiGridPertama.sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
// This will make sure we only drop to the view container
var gridKeduaDropTargetEl = gridKedua.getView().el.dom.childNodes[0].childNodes[1]
var destGridDropTarget = new Ext.dd.DropTarget(gridKeduaDropTargetEl, {
ddGroup : 'gridKeduaDDGroup',
copy : false,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = isiGridKedua.find('name', record.data.name);
// if not found
if (foundItem == -1) {
isiGridKedua.add(record);
// Call a sort dynamically
isiGridKedua.sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
});
Eksekusi / buka file drag_grid.html di dalam browser, jika benar maka akan ditampilkan berikut ini :
Coba drag and drop data yang ada di Grid Pertama ke Grid Kedua atau sebaliknya. Berhasil bukan?
Selamat Mencoba ....