Struktur Dasar ExtJS

Berikut ini adalah struktur dasar ExtJS yang perlu dipahami :

  1. Ext.onReady → fungsi yang akan dieksekusi setelah elemen-elemen DOM pada halaman sudah siap.
  2. Ext.Msg.show → fungsi untuk menampilkan kotak pesan ala aplikasi desktop.
  3. Ext.get → fungsi untuk mengakses dan manipulasi elemen DOM.
  4. 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 :

Kotak Dialog Muncul

Interaksi setelah tombol diklik

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 :

kotak dialog

Kotak peringatan

Kotak proses

Klik di sini untuk tulisan lain tentang Ext JS di blog ini.

Iklan

7 thoughts on “Struktur Dasar ExtJS

  1. mohon pencerahannya…bagaimana menampilkan data dalam format report dengan extjs
    Kalo boleh minta contohnya
    Terimakasih..

  2. Terima kasih sharingnya. nambah ilmu lagi nih…punya ebook tentang ExtJS? pengen belajar lebih lanjut…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s