Berikut ini adalah struktur dasar ExtJS yang perlu dipahami :
- Ext.onReady → fungsi yang akan dieksekusi setelah elemen-elemen DOM pada halaman sudah siap.
- Ext.Msg.show → fungsi untuk menampilkan kotak pesan ala aplikasi desktop.
- Ext.get → fungsi untuk mengakses dan manipulasi elemen DOM.
- Objek-objek konfigurasi → menentukan bentuk dan perilaku dari widget ExtJS.
Contoh script :
Ext.onReady(function(){ Ext.Msg.show({ title: 'Kotak Dialog', msg: 'Setuju?', buttons: { yes: true, no: true, cancel: true }, fn: function(btn) { Ext.Msg.alert('Kau memilih ', btn); } }); } )
Pada script di atas sudah terlihat penggunaan Ext.onReady dan Ext.Msg.show.
Di dalam Ext.Msg.show adalah contoh dari objek konfigurasi ExtJS.
Format penulisan objek konfigurasi :
- Berada di dalam kurung-kurawa “{ }” .
- Tiap data objek berisi sepasang nama dan nilainya. Antar nama dan nilai dipisahkan dengan titik-dua “:”. Contohnya,
title: 'Kotak Dialog'
- Antar satu pasang data objek dengan satu pasang data objek lainnya dipisahkan dengan koma “,”. Contohnya,
title: 'Kotak Dialog', msg: 'Setuju?'
- Nilai dapat bertipe apapun. Termasuk boolean, array, function, atau objek lainnya.
- Tipe array ditandai dengan penggunakan kurung-siku “[ ]”. Contohnya,
{name: [ 'satu', 'dua', 'tiga' ] }
Berikut ini adalah tampilan yang akan muncul dari script di atas :
Bermain-main sedikit. Coba ubah script :
fn: function(btn) { Ext.Msg.alert('Kau memilih ', btn); }
Menjadi :
fn: function(btn) { switch(btn){ case 'yes': Ext.Msg.prompt('Pendapat', 'Apa alasan mu?'); break; case 'no': Ext.Msg.alert('Bahaya', 'Get out!'); break; case 'cancel': Ext.Msg.wait('Tunggu sebentar...','Sedang memproses'); break; } }
Maka jika kita coba klik satu-per-satu tombol tersebut, akan keluar tampilan sebagai berikut :
Klik di sini untuk tulisan lain tentang Ext JS di blog ini.
Iklan
makasih,, tulisannya baguuss. 🙂
mohon pencerahannya…bagaimana menampilkan data dalam format report dengan extjs
Kalo boleh minta contohnya
Terimakasih..
🙂
Wah2.., mantapp2.. Master Putri Chairina klo blh.., minta script lengkapnya dunk.. 🙂
Nice posting . 😀
Terima kasih sharingnya. nambah ilmu lagi nih…punya ebook tentang ExtJS? pengen belajar lebih lanjut…
Terima Kasih Tulisannya sangat bermanfaat …