Berkenalan dengan Ext JS

Ext JS😕 Siapa lagi tuh? Keren gak seh? Kalo penasaran ma dia. Coba simak, baca dan praktekan apa yang ada dalam artikel ini. Here We Go..
Ext JS adalah sebuah pustaka atau bisa dikatakan Framework JavaScript lintas browser untuk membangun aplikasi Web berbasis RIA(Rich Internet Aplication), yaitu aplikasi web berbasis GUI atau apliaksi Web layaknya aplikasi Desktop. Ext JS ini mempunyai beberapa fitur seperti:

  • Mempunyai performa tinggi dan widget UI yang bisa dapat diatur
  • Mempunyai desain menarik, terdokumentasi
  • Tersedia versi komersial maupun yang open sourc

Ext JS mendukung web browser berikut:

  • Internet Exploler 6+
  • Firefox 1.5+(PC, Mac)
  • Safari 3+
  • Opera 9(PC, Mac)

Memulai Ext JS

Sebelum memulai membuat aplikasi dengan Ext JS ini, ada beberapa hal yang perlu dilakukan.

  1. download ext Js di situs resminya www.extjs.com/download. Pada artikel ini penulis menggunakan extJs 2.2.0. anda bisa memilih paket yang dibutuhkan termasuk source code berisi contoh-contoh aplikasi jadi
  2. ekstrak file ext Js yang sudah Anda download di sembarang komputer, misalkan di d:\belajar_extjs

Beberapa file yang dibutuhkan

Jika kita ingin membuat aplikasi web menggunakan Ext JS, mau tidak mau kita harus memasukan 3 file berikut pada aplikasi kita:

  1. ext-all.css(extjs/resources/css/ext-all.css) adala file stylesheet/css yang mengontrol look and feel dari widget Ext. file ini harus diinkludkan tanpa ada sedikitpun perubahan.
  2. ext-base.js(extjs/adapter/ext/ext-base.js) adalah file yang menyediakan core function dari ext js. Dia diibaratkan sebagai mesin dari sebuah mobil. File ini juda dapat kita gunakan jika kita ingin memakai library lain, sperti jQuery atau library lainnya
  3. ext-all-debug.js atau ext-all.js(extjs/ext-all-debug.js atau extjs/ext-all.js). semua widget berada dalam file ini

Apliksi pertamaku

Setelah Anda mengetahui beberapa hal dasar, sekarang saatnya Anda mencoba mempraktekan atau tepatnya membuat suatu aplikasi sederhana. Dalam aplikasi pertama ini akan kita coba menampilkan pesan pada saat halaman web diload. Buat file dengan nama index.html. Saya asumsikan library ext js diekstrak di folder extjs

index2

Pada file index.html setelah kita tambahkan tiga file penting, kita juga menambahkan satu file message.js. File inilah yang nanti akan menampilkan pesan.

Message.js


Ext.onReady(function(){
Ext.Msg.alert('Aplikasi Pertama', 'Belajar Ext JS, asyik boo...');
});

Buka browser anda lalu buka file index.html. Hasilnya seperti gambar berikut ini:

halo2

Selamat Anda berhasil.
download pdf
Tutorial berikutnya >> Ext Js: Pengenalan Form

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

%d blogger menyukai ini: