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.