ExtJs Overview

Dapet dari blog sebelah, sekedar untuk mangingatkan tentang apa yang pernah ku baca dan ku pelajari.

Keinginan untuk memiliki aplikasi berbasis web layaknya aplikasi desktop yang menyediakan kemampuan listener atau event handler mengharuskan penulis mencari contoh kode yang sudah menyediakan feature tersebut.

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)

1	Ext.extend(MainPanel, Ext.TabPanel, {

2	width : 500,

3	height : 400,

4	initEvents : function(){

5	MainPanel.superclass.initEvents.call(this);

6

}

7	//more action handler for this panel

8

});

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.

Memulai ExtJS
Download librari ExtJS dari websitenya http://www.extjs.com. Buat folder dengan nama aplikasiweb
Berdasarkan tutorial ExtJS, untuk memulai membuat aplikasi dengan ExtJS anda membutuhkan minimal 3 file. Kurang dari 3 file sebetulnya gak pa apa cuma kode menjadi tidak terkelola. Ke-3 file itu adalah 1 file HTML, 1 file Javascript dan 1 file CSS.

Dalam file HTML berisi code untuk menyertakan resource file aplikasi yaitu file Javascript dan file CSS, dan biasanya file HTML ini akan dipanggil/ direquest oleh user. Contoh file HTML ini adalah sebagai berikut:
Buat file html ini dalam folder aplikasiweb.

Application Layout Tutorial

Penjelasan:
Aplikasi membutuhkan librari ExtJS, dimana kita harus meng-include-kan file javascript dari ExtJS yaitu ext-base.js dan ext-all.js (untuk production) atau ext-base-debug.js dan ext-all-debug.js (saat development), serta file css ext-all.css. Sesuaikan aja lokasi path dengan lokasi path librari extjs di komputer anda.

Di dalam tag body bisa anda tambahkan informasi apapun atau tag div dari DOM. Kemudian file Javascript lain applyayout.js, ini adalah file javascript baru yang anda buat. Di dalamnya berisi kode javascript untuk pembuatan aplikasi web ini. Misalnya kita akan menampilkan window, kodenya seperti berikut:

01

/**

02	* Application Layout

03	* http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners

04

*/

05

06	// reference local blank image

07	Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

08

09	// create namespace

10	Ext.namespace('myNameSpace');

11

12	// create application

13	myNameSpace.app = function() {

14	// do NOT access DOM from here; elements don't exist yet

15

16	// private variables

17

var btn1;

18	var privVar1 = 11;

19

20	// private functions

21	var btn1Handler = function(button, event) {

22	alert('privVar1=' + privVar1);

23	alert('this.btn1Text=' + this.btn1Text);

24

};

25

26	// public space

27

return {

28	// public properties, e.g. strings to translate

29	btn1Text: 'Button 1′,

30

31	// public methods

32	init: function() {

33	if (Ext.Ext2) {

34	btn1 = new Ext.Button({

35	renderTo: 'btn1-ct',

36	text: this.btn1Text,

37	handler: btn1Handler

38

});

39

}else{

40	btn1 = new Ext.Button('btn1-ct', {

41	text: this.btn1Text,

42	handler: btn1Handler

43

});

44

}

45

}

46

};

47	}(); // end of app

48

49	Ext.onReady(myNameSpace.app.init, myNameSpace.app);

50

// end of file

Kode diatas berisi kode minimal. Sangat disarankan kode javascript dalam file JS project anda harus menggunakan struktur layout ini.

Kode-kode diatas akan dibaca mulai dari atas sampai end of file. Tetapi kode javascript akan dieksekusi mulai dari method Ext.obReady(); dimana kondisi ini dilakukan setelah semua kode javascript dan resource aplikasi dimuat ke browser. Jadi jangan kaget kalau anda bermain dengan javascript loading awal aplikasi agak lama, ya karena semua resource dimuat dulu.

Begitu method Ext.onReady() dieksekusi maka obyek-obyek javascript akan tercipta dan mengeksekusi method dan properti. Sehingga kalau anda buat kode cara membacanya dari bawah ya, atau dari method Ext.onReady(), ibaratkan aja method ini adalah method mainnya.

Untuk file CSS bersifat optional, dibutuhkan jika anda menggunakan CSS untuk mempercantik tampilan.

Jika file applayout.html ini anda akses dari browser, maka akan muncul 2 button yang kalau diklik akan memunculkan pesan.

Terlihat dalam kode javascript kedua button memiliki penanganan action handler, yang didefinisikan dalam properti handler; Bentuk penulisan ini menggunakan format JSON yang sangat ringkas dan fleksibel.

Sedikit ini dulu artikel yang bisa dituliskan. Konsep dasarnya seperti itu, nantinya anda tinggal kembangkan dengan membuat panel, tabpanel, window, formpanel, borderlayout, dataview layout, datagrid dan masih banyak lagi komponen yang siap digunakan.

Sumber :
http://edui.wordpress.com/2008/07/17/belajar-dan-menggunakan-extjs-untuk-interface-aplikasi-web/