Mengenal Extjs

ExtJS adalah sebuah library (framework) Javascript yang powerfull yang dapat menyederhanakan pembuatan aplikasi web berbasis AJAX. Selain mempermudah proses request dan response secara asynchronous, ExtJS juga menyediakan komponen-komponen yang bisa kita gunakan untuk membangun antarmuka aplikasi web. Komponen-komponen yang disediakan juga sangat banyak seperti tombol, grid, tab, tree, menu dan lainnya.

ExtJS dapat dijalankan pada semua web browser yang populer saat ini dengan tampilan yang sama antar browser (cross browser). Beberapa web browser yang mendukung ExtJS diantaranya adalah:

  • Internet Explorer versi 6 keatas
  • Mozilla Firefox versi 1.5 keatas
  • Apple Safari versi 2 keatas
  • Opera versi 9 keatas

ExtJS yang demikian fleksibel dengan tampilan GUI-nya yang manis merupakan pengembangan dari YUI, yaitu yahoo javascript librari yang dipadu dengan Jquery dan prototype. Integrasi ketiga librari dengan mengedepankan paradigma OOP yang telah didukung oleh Javascript menjadi nilai tambah librari ini untuk menjadi pilihan pemrograman web masa kini.

Konsep OOP Javascript
Javascript tidak mengenal tipe data, tapi bisa mendeteksi tipe data secara otomatis. Konsep OOP Javascript sudah mendukung object yang memiliki property dan method, konstruktor dan konsep pewarisan. Sehingga pengembangan aplikasi web bisa reuse code yang sudah ada dan mengembangkannya (extends).

Sebagai contoh dibawah ini :

Ext.extend(MainPanel, Ext.TabPanel, {
width : 500,
height : 400,
initEvents : function(){
MainPanel.superclass.initEvents.call(this);
}
//more action handler for this panel
});

Code diatas adalah contoh class turunan MainPanel dari class TabPanel. Dalam class ini membolehkan deklarasi method dan property. Contoh property adalah width, da height, sementara contoh method adalah initEvents.

Sekarang kita akan mencoba menampilkan pesan “Selamat belajar” dengan extjs.

Link yang dibutuhkan dari library extjs adalah ebagai berikut :

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script src="extjs/adapter/ext/ext-base.js"></script>
<script src="extjs/ext-all-debug.js"></script>

Kemudian dibawahnya link tersebut, tambahkan kode dibawah ini :

<script>
		Ext.onReady(function() {
		Ext.Msg.alert('Pesan', 'Selamat Belajar');
	 });
	 </script>

Kode lengkapnya akan menjadi seperti dibawah ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="wahyu" />

	<title>Untitled 1</title>
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
   	<script src="extjs/adapter/ext/ext-base.js"></script>
    <script src="extjs/ext-all-debug.js"></script>
    <script>
		Ext.onReady(function() {
		Ext.Msg.alert('Pesan', 'Selamat Belajar');
	 });
	 </script>
</head>
<body>

</body>
</html>

Jalankan file anda dari root dilokal server. Untuk explorasi lebih lanjut, dapat melihat exemple yang disertakan saat kita download paket extjs.
Satu hal penting, file library extjs-all-debug.js hanya digunakan untuk kepentingan proses developing untuk menangkap error handling. Apabila aplikasi sudah tidak pada proses develop, maka diganti dengan extjs-all.js.

Selamat bereksplorasi😀

%d blogger menyukai ini: