Sebagai lanjutan Dari tutorial extjs sebelumnya, sekarang Saya mencoba untuk menulis untuk tutorial selanjutnya yakni bagaimana membuat drag and drop grid denextjs. 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,
Yydrop: 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,
Yydrop: 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 ....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
