Sharing knowledge
Monday Jun 22, 2009
Grid sederhana dengan Array (ExtJS - 1)
Awal mulanya saya kira menggunakan library dari ExtJS itu sangat sulit, apalagi pembangunan ExtJS ini bersamaan dengan JavaScript. Saat pembelajaran pertama kali saya gagal, namun saya tidak menyerah begitu saja. Saat eksekusi hasil koding selalu saja tampil halaman kosong dan "saya tidak tahu apa yang menyebabkan hal ini terjadi". Saat melakukan pencarian di internet, saya menemukan solusi. Ada sebuah plugin yang dapat di install ke dalam web browser Firefox, namanya Firebug. Firebug adalah sebuah alat yang terinegrasi ke dalam Firefox yang dapat digunakan sebagai alat debug error yang ditimbulkan karena kesalahan kode Javascript. Jika mau menggunakan ini silahkan kunjungi disini untuk melakukan installasi pluginnya.
Berikut ini saya akan mencoba untuk mensyaring pengetahuan saya tentang ExtJS. Syarat pertama yang perlu dipenuhi adalah anda harus memiliki library ExtJS yang dapat anda download disini. Pada uraian di bawah ini, saya menggunakan library ExtJS versi 2.2.1
>> buat sebuah file dengan nama "array-grid.html" dan isikan kode berikut :
<html>
<head>
<title>Contoh Grid dari Data Array</title>
<!- masukkan deklarasi kode css : ext-all.css ->
<link rel="stylesheet" type="text/css" href="ext-2.2.1/resources/css/ext-all.css" />
<!- masukkan deklarasi kode javascript : ext-base.js ->
<script type="text/javascript" src="ext-2.2.1/adapter/ext/ext-base.js"></script>
<!- masukkan deklarasi kode javascript : ext-all.js ->
<script type="text/javascript" src="ext-2.2.1/ext-all.js"></script>
<!- masukkan deklarasi kode javascript : array-grid.js (pada langkah selanjutnya) ->
<script type="text/javascript" src="array-grid.js"></script>
</head>
<body>
<!- grid akan merender elemen ini ->
<div id="grid-example"></div>
</body>
</html>
>> Buat file dengan nama "array-grid.js" dan masukkan kode berikut :
Ext.onReady (function () {
var dataArray = [
[1,'Sofian','PT. Surya Jaya','Jl. Anggrek No. 12','11 Januari 2007'],
[2,'Titian','CV. Mulya','Jl. Bunga No. 122','11 Januari 2007'],
[3,'Budianto','PT. Manunggal Abadi','Jl. Banyu Asin No. 23','11 Januari 2007'],
[4,'Rozali','UD. Rakyat Bersama','Jl. Kuda Lumping No. 12','12 Januari 2007'],
[5,'Bandi','CV. Kerja Keras','Jl. Gatot Kaca No. 18','12 Januari 2007'],
[6,'Agus Kuncoro','PT. Surya Senja','Jl. Imam Bonjol No. 42','13 Januari 2007'],
];
// membuat data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'no', type: 'int'},
{name: 'nama'},
{name: 'perusahaan'},
{name: 'alamat'},
{name: 'tanggal_gabung'}
]
});
// mengeload data
store.loadData(dataArray);
// membuat grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'no',header: "No", width: 30, sortable: true, dataIndex: 'no'},
{header: 'Nama', width: 100, dataIndex: 'nama'},
{header: 'Nama Perusahaan', width: 250, dataIndex: 'perusahaan'},
{header: 'Alamat', width: 250, dataIndex: 'alamat'},
{header: 'Tanggal Gabung', width: 100, dataIndex: 'tanggal_gabung'}
],
stripeRows: true,
height:180,
width:500,
title:'Data Customer'
});
// merender grid ke elemen grid-example (lihat pada array-grid.html)
grid.render('grid-example');
});
Jika semua kode tertulis dengan benar, dan peletakan file benar maka akan ditampilkan seperti berikut ini :
 |
Posted at 03:32AM Jun 22, 2009 by bagus suwandi in ExtJS | Comments[3]
Subscribe!
Wah, trims tutorialnya.
Keep up the good work!!!
Posted by Agi on June 22, 2009 at 04:16 PM WIT #
kok susah yah ...????
tototnya salah kali...
kok gak jalan2 yah ....
gak action nya ...
Posted by joko on June 23, 2009 at 12:22 PM WIT #
Sudah dimananya ...
Coba buat step by step
Posted by Bagus Suwandi on August 31, 2009 at 07:32 PM WIT #