ExtJS merupakan framework yang focus pada kemudahan pengembangan user interface untuk aplikasi web. Dengan arsitektur ExtJS kita dapat membuat aplikasi web yang memiliki tampilan yang menarik dan professional hanya dengan sedikit membuat kode program. Tentang Javascript
Javascript merupakan bahasa yang object oriented. Setiap data di dalam Javascript adalah objek. Numbers, strings, tanggal, dan Boolean (true atau false) semua adalah objek. Variable pada Javascript merupakan referensi dari objek yang kita assign, seperti halnya pointer/penunjuk terhadap lokasi sebuah objek. Dalam Javascript sebuah fungsi juga adalah objek dan dapat disimpan/assign pada sebuah variable dan juga dapat dikirimkan/passed se bagai parameter. Jadi sebuah deklarasi fungsi dalam Javascript adalah literal yang sama dengan deklarasi sebuah string. Sebagai contoh
var myVariable = "A string literal"; alert(myVariable); myVariable = function() { alert("Executing the function"); }; myVariable();
Konsep ini merupakan dasar utama bagi kita untuk memahami framework ExtJS. Fungsi akan dipassing sebagai parameter ke dalam fungsi-fungsi (methods) ExtJS yang kemudian dieksekusi oleh ExtJS untuk menangani event user interface atau event komunikasi network (AJAX). Tentang ExtJS
Pada modul ini kita akan menggunakan ExtJS versi 3.x. Walaupun demikian contoh-contoh dalam modul ini masih kompatibel dengan versi 2.x. Pada awalnya ExtJS merupakan extension dari Yahoo User Inteface Library (YUI). ExtJS menyediakan apa yang menjadi kekurangan YUI yaitu kemudahan dalam penggunaan APInya dan widgets dengan tampilan yang professional. Dengan kemudahan dan komponen komponen user interface yang kaya, aplikasi web ExtJS ExtJS akan terlihat seperti aplikasi Desktop. Hal ini juga menyebabkan akan meningkatnya produktifitas developer, karena akan
1
lebih focus pada bisnis proses dari web aplikasi yang dikembangkan dan tidak perlu lagi terlalu memikirkan masalah user interface. Instalasi
1. Untuk
mulai
menggunakan
ExtJS
silahkan
download
ExtJS
SDK
dari
alamat
http://www.extjs.com/products/js/download.php 2. Ekstraklah file ExtJS tersebut pada folder tertentu misalnya lib yang berada pada webroot server apache.
Ubahlah nama folder ext-3.2.1 menjadi extjs. Dalam SDK ini semua file yang kita butuhkan untuk menggunakan ExtJS sudah tersedia, biasanya disebut ext-all. Dalam SDK ini juga terdapat versi yang digunakan dalam fase development yang disebut versi debug. Versi debug ini yang akan banyak kita gunakan dalam modul training ini. Versi debug memudahkan kita untuk mencari error yang terjadi karena tidak terkompresi sehingga akan dengan mudah memberikan informasi nomor baris yang error. Ketika aplikasi kita sudah selesai dan akan kita implementasi pada server produksi, kita harus mengubah aplikasi kita untuk menggunakan ExtJS yang versi standard yaitu ext-all, dan aplikasi kita akan berjalan sebagaimana mestinya. Folder adapter dan resources merupakan folder yang dibutuhkan ExtJS agar dapat bekerja dengan baik, selain itu hanya dibutuhkan untuk fase development. a. adapter: file-file library pihak lain yang dapat digunakan bersama dengan ExtJS b. docs: dokumentasi ExtJS c.
examples: contoh-contoh penggunakan ExtJS
d. pkgs: ExtJS modul yang digunakan dalam development ExtJS e. resource: dependencies ExtJS Library, seperti CSS dan images f.
src: source code ExtJS
g.
test: test suite untuk ExtJS
h. welcome: file image lainya
2
Saat kita akan mendeploy halaman web yang menggunakan ExtJS ke server, folder adapter dan resources juga harus ikut dideploy bersama dengan file ext -all.js da next-all-debug.js Menggunakan ExtJS pada halaman web
Sebelum dapat menggunakan ExtJS pada halaman web kita, kita harus buat referensi ke ExtJS library. Untuk hal ini kita butuh menginclude beberapa baris code pada bagian HEAD dari halaman HTML web kita.
Getting Started Example <script src="lib/extjs/ad src="lib/extjs/adapter/ext/ext-bas apter/ext/ext-base.js"> e.js"> <script src="lib/extjs/ex src="lib/extjs/ext-all-debug.js">< t-all-debug.js"> /script>
Pastikan path atau lokasi yang dituliskan benar dan juga urutan mengincludenya harus sesuai seperti contoh di atas. a.
Ext-all.css adalah file stylesheet yang mengatur look and feel dari komponen-komponen ExtJS. File ini wajib di includekan dan tidak boleh dimodifikasi.
b. Ext-base.js, menyediakan fungsi-fungsi dasar dari ExtJS. File ini yang dapat kita modifikasi jika kita menggunakan ExtJS dengan library lain seperti jQuery misalnya. c.
Ext-all-debug.js atau ext-all.js, semua komponen/widget ExtJS berada dalam file ini. Debug version digunakan dalam fase development dan gunakan yang versi non-debug untuk production.
Spacer Image
ExtJS butuh sebuah spacer image yaitu file image (GIF) transparan berukuran 1x1 pixel yang digunakan ExtJS untuk layout komponennya (widgets).
3
HelloWord dengan ExtJS
Berikut ini adalah contoh bagaiman kita menggunakan ExtJS pada halaman web kita. Pada contoh ini akan menampilkan sebuah alert dialog.
Getting Started Example <script src="lib/extjs/adapter/ext/ext-base.js"> <script src="lib/extjs/ext-all-debug.js"> <script> if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data:') { Ext.BLANK_IMAGE_URL = 'lib/extjs/resources/images/default/s.gif'; } Ext.onReady(function(){ Ext.Msg.alert('Hi', 'Hello World Example'); });
4
Ext.onReady Function
ExtJS hanya akan merender widget ketiga sebuah halaman HTML telah selesai diinisialisasi oleh browser. Semua halaman ExtJS dapat mengakses dokumen hanya melalui pemanggilan fungsi Ext.onReady. Contoh sebelumnya dapat diubah menjadi
var mainFunction = function(){ Ext.Msg.alert('Hi', 'Hello World Example'); }; Ext.onReady(mainFunction);
Berinteraksi dengan ExtJS Widget
Pada bagian ini kita akan mulai berinteraksi dengan ExtJS Widget dengan membuat sejumlah dialog yang saling berinteraksi. Kita akan menggunakan fungsi OnReady, MessageBox, dan get untuk belajar bagaimana membuat dialog dengan tipe yang berbeda-beda. Kita mulai dengan beberapa fungsi dasar dari ExtJS. Masih dengan contoh sebelumnya kemudian kita akan tingkatkan penggunaan ExtJS. Fungsi-fungsi berikut akan kita gunakan pada setipa project dalam modul ini. a.
Ext.Msg: Fungsi ini digunakan untuk membuat messagebox
b. Configuration objects: digunakan untuk mendefinisikan bagaimana karakteristik widget ExtJS c.
Ext.get: Fungsi ini digunakan untuk mengakses dan memanipulasi element-element dalam DOM
Config Object
ExtJS Config Object adalah Object literal Javascript. Tujuannya adalah untuk memberikan cara mengkonstruk data sehingga mudah dibaca. Widget dan Classes
ExtJS memiliki banyak Widget yang diimplementasikan dalam bentuk class class. Misalnya Messagebox, Grid, Window, Tree, Form, dan lainnya. Selain itu ExtJS juga memiliki clas-class lain untuk data, utility dan base class. Fungsi seperti OnReady adalah bagian dari class core function. Pada bagian ini kita akan focus pada class-class yang termasuk dalam windget atau user inter face. Berikut ini adalah contoh bagaimana kita menggunakan Config Object pada Class Widget dalam hal ini adalah Messagebox untuk mengatur karakteristik Messagebox tersebut.
5
Ext.onReady(function(){ Ext.Msg.show({ title: 'Milton', msg: 'Have you seen my stapler?', buttons: { yes: true, no: true, cancel: true } }); });
Seperti pada contoh sebelumnya, disini kita mempasing sebuah fungsi yang akan menampilkan Messagebox pada fungsi OnReady. Yang berbeda disini adalah messagebox tersebut sudah kita konfigurasi menggunakan config object. Dengan cara yang sama kita dapat melakukan konfigurasi untuk widget-widget yang lainnya dalam ExtJS. Contoh sebelumnya dapat kita ubah menjadi
var stapler = function(){ Ext.Msg.show({ title: 'Milton', msg: 'Have you seen my stapler?', buttons: { yes: true, no: true, cancel: true } }); } 6
Ext.onReady(stapler); Konfigurasi Lebih Lanjut
Tambahkan kode berikut (CSS) pada bagian HEAD dari halaman HTML kita.
milton-icon { background: url(milton-head-icon.png) no-repeat; } Kemudian lakukan perubahan pada konfiguras Widget kita Ext.Msg.show({ title: 'Milton', msg: 'Have you seen my stapler?', buttons: { yes: true, no: true, cancel: true }, icon: 'milton-icon', fn: function(btn) { Ext.Msg.alert('You Clicked', btn); } });
Membuat Form
Pada bagian ini kita akan menggunakan Widget ExtJS yang lainnya yaitu Form. Form pada ExtJS sama dengan form pada HTML tetapi lebih flexible, memiliki error chec king, styling, dan layout otomatis. Form dienkapsulasi pada class FormPanel yang merupakan turunan dari class Panel, sehingga Form dapat melakukan semua yang dapat dilakukan oleh Panel dalam ExtJS. Pada bagian ini kita akan memahami hal-hal berikut a.
Membuat Form dengan kemampuan Ajax submission
b. Validasi field c.
Mengambil data dari database
7
Form memiliki 2 fungsi utama, pertama adalah bagian yang berfungsi sebagai action seperti loading value dan submitting form data. Kemudian yang kedua adalah bagian yang mengatur bagaimana fieldfield pada form ditampilkan (layout). Berikut adalah komponen dasar form yang akan sering digunakan. a.
Ext.form.FormPanel: subclass dari Panel yang berfungsi sebagai Form
b. Ext.form.BasicForm: class yang digunakan FormPanel untuk managemen field, ajax submission dan loading data. c.
Ext.form.Field: class dasar yang mengimplementasi kapabilitas sebuah field
} Setiap jenis field dalam ExtJS memiliki konfigurasi khusus sesuai dengan tipe data masing-masing. Berikut adalah beberapa option yang tersedia Field Type
Option
Value type
Description
numberfield
decimalPrecision
Integer
How many decimal places to allow
datefield
disabledDates
Array
An array of date strings that cannot be selected
timefield
increment
Integer
How many minutes between each time option 9
Sebagai contoh misalnya kita ingin meng-disable tanggal tertentu pada datefield
Saat kita menggunakan jenis field yang berbeda, kita memiliki validator yang berbeda misalnya numberfield dapat kita batasi size dari number tersebut atau dec imal placenya. Standar konfigurasi masing-masing jenis field dapat ditemukan dalam API Reference
10
Build-in Validation
ExtJS memiliki build in validation yaitu vtypes. Ini dapat digunakan untuk membatasi user input yang umumnya digunakan, misalnya untuk input email, url, alpha, alphanum
Salah satu build-in option yang dapat digunakan untuk menampilkan error message adalah ballon tips dengan class QuickTips. Untuk menggunakannya kita hanya butuh menambahkan 1 baris code berikut sebelum Form kita diinisialisasi.
Ext.QuickTips.init();
Radio button dan check box Kode berikut ini menambahkan radio button pada form kita sebelumnya menggunakan ‘radiogroup’.
Default xtype dari radiogroup adalah radio jadi kita tidak perlu me ngkonfigurasinya.
{ xtype: 'checkbox', fieldLabel: 'Bad Movie', name: 'bad_movie', checked: true } Kita dapat menggunakan CheckboxGroup jika diinginkan ada beberapa checkbox. Penggunaannya sama seperti RadioGroup. Combobox
Komponen ini memiliki fungsi yang sama dengan element SELECT pada HTML, yang menyediakan pilihan dropdown yang dapat dipilih. Combobox dapat secara dinamis mengambil data dari server (datasource). Datasource dapat kita analogikan berupa tabel pada client side. Datasource ini memiliki beberapa record data. Classs ArrayStore kita konfigurasi seperti halnya tabel yang memiliki field name dan data berupa array 2 dimensi.
var genres = new Ext.data.ArrayStore({ fields: ['id', 'genre_name'], data : [['1','Comedy'],['2','Drama'],['3','Action']] }); Beberapa konfigurasi yang kita butuhkan saat menginisialisasi Combobox antara lain a.
Store: store merupakan data yang akan ditampilkan dalam Combobox
b. Mode: mengspesifikasikan apakah datasource akan diload terlebih dahulu atau diload secara dinamis saat kita mengetikan suatu karakter di Combobox. c.
displayField: Mengspesifikasikan field yang valuenya akan diasosiasikan. Jika option ini digunakan maka option hiddenName juga harus dikonfigurasi.
d. hiddenName: ini merupakan hidden HTML field yang digunakan untuk menyimpan nilai dari combobox.
Contoh ini cocok untuk combobox yang datanya tidak terlalu banyak dan tidak berubah secara dinamis. Combobox dengan data dari Database
Untuk melakukan hal ini maka kita perlu membuat kode pada server side misalnya dengan menggunakan PHP. Kode pada server side akan mengambil data dari tabel dan memformatnya dalam format String JSON sehingga dapat digunakan oleh Combobox. Untuk melakukan hal ini kita membutuhkan library JSON untuk melakukan encode data. Pada PHP 5.1 ke atas library JSON sudah tersedia. 14
0) { while ($obj = mysql_fetch_object($result)) { $arr[] = $obj; } } Echo '{rows:'.json_encode($arr).'}'; ?> Ketika kita menggunakan remot data seperti contoh ini, maka ada beberapa hal yang perlu kita sesuaikan pada client sidenya. Pertama, datasource harus mengetahui format data yang ada. Saat kita menggunakan class ArrayStore maka format datanya adalah array. Pada contoh berikut kita spesifikasikan bahwa data yang akan dibaca adalah data dalam format JSON sehingga kita membutuhkan JsonReader.
var genres = new Ext.data.Store({ reader: new Ext.data.JsonReader({ fields: ['id', 'genre_name'], root: 'rows' }), proxy: new Ext.data.HttpProxy({ url: 'data/genres.php' }), autoLoad: true });
TextArea dan HTMLEditor
Selanjutnya kita akan menambahkan multiline textarea pada form. ExtJS punya 2 option untuk hal ini. Pertama kita dapat menggunakan standar
textarea atau
kita dapat menggunakan
HTMLEditor berupa
rich text editing. Kita akan menggunakan 2 option konfigurasi yang baru a.
hideLabel: ini akan menyebabkan textarea tersebut tidak akan memiliki label pada bagian kirinya.
b. Anchor: jika diberi nilai 100% maka textarea ini akan memenuhi lebar dari form.
15
{ xtype: 'textarea', name: 'description', hideLabel: true, height: 100, anchor: '100%' } Atau kita dapat mengganti xtype dengan ‘htmleditor’
Sampai disini kita sudah membuat sebuah form yang lumayan kompleks. Yang belum dibuat adalah form ini belum mengirimkan data ke server. Untuk hal ini kita akan menambahkan beberapa button pada form tersebut.
Pada kode server side di atas kita melakukan pengecekan apabila field title kosong maka akan dikembalikan pesan kesalahan dalam format JSON. Loading Form With Data Form yang menampilkan data biasanya digunakan untuk mengubah data. Data diambil dari mana saja, baik itu data dinamis dari database atau dari variable dan literal tertentu. Untuk menampilkn data dari literal dapat kita liat pada contoh berikut.
berikut adalah contoh untuk membaca data dari database
0) { $obj = mysql_fetch_object($result); Echo '{success: true, data:'.json_encode($obj).'}'; }else{ Echo '{success: false}'; } ?> Kode ini akan menghasilkan data dalam format JSON kurang lebih seperti berikut ini
{ success: true, data:{ "id":"1", "title":"Office Space", "director":"Mike Judge", "released":"1999-02-19", "genre":"1", "tagline":"Work Sucks", "coverthumb":"84m.jpg", "price":"19.95", "available":"1" } } Untuk di tampilkan dalam form kita butuh mentriggernya dengan memanggil method load
Menu, Toolbar dan Button Class yang digunakan untuk kebutuhan ini adalah Ext.menu.Menu, Ext.Toolbar, Ext.Button, Ext.SplitButton, Ext.CycleButton dan Ext.ButtonGroup.
new Ext.menu.Menu({ renderTo: document.body, width: 150, floating: false, items: menuItem }); Untuk Popup menu perlu konfigurasi tambahan yaitu kita menentukan dimana menu tersebut akan ditampilkan. Untuk hal ini kita tambahkan contextmenu listener untuk mendeteksi dimana mouse diklik (right click).
var contextMenu = new Ext.menu.Menu({ items: menuItem }); Ext.getDoc().on({ contextmenu: function(eventObj) { contextMenu.showAt(eventObj.getXY()); }, stopEvent: true }); Menu Item Variable menuItems pada contoh diatas merupakan referensi ke sebuah array. Ini merupakan list dari komponen dan config object sama seperti pada pembuatan FormPanel. MenuItem class memiliki config option sebagai berikut
a. b. c. d. e.
Icon: URL untuk image pada menu IconCls: CSS class name untuk mengatur style dari icon Text: Teks yang ditampilkan pada menu Handler: fungsi yang akan dipanggil saat menu di klik Menu: menu object, atau menu config object y ang merepresentasikan sub menu.
var menuAction = function(){ Ext.Msg.alert('Message','Menu Click'); } var menuItem = [ { text : 'Menu Option 1', iconCls: 'flag-green', handler: menuAction }, { text: 'Menu Option 2', iconCls: 'flag-green',
Toolbar pada Panel Toolbar dapat digunakan pada semua Class yang merupakan turunan dari Class Panel, seperti GridPanel, TreePanel dan Window
new Ext.Window({ title: 'Help', width: 300, height: 300, renderTo: document.body, closeAction: 'hide', layout: 'fit', tbar: [{ text: 'Close', handler: function(){ winhelp.hide(); } },{ text: 'Disable', handler: function(t){ t.disable(); } }] }); Menampilkan Data dalam Grid Grid merupakan salah satu komponen yang sangat penting. Grid biasanya digunakan untuk menampilkan daftar data yang banyak. ExtJS memiliki widget Grid yang fleksibel.
var data = prompt('Tell me something'); Ext.Msg.prompt('Hey!', 'Tell me something', function(btn, text){ if (btn == 'ok'){ var data = text; } }, this, false, '');
Confirmation Dialog
Ext.Msg.confirm('Hey!', 'Is this ok?', function(btn, text){ if (btn == 'yes'){ // go ahead and do more stuff } else { // abort, abort! } });
28
Window Kita dapat membuat window seperti kode berikut ini
var w = new Ext.Window({height:100, width: 200}); w.show();
Kita juga dapat menggunakan HTML untuk mendefinisikan Window
var w = new Ext.Window({ height: 150, width: 200, title: 'A Window', html: '
Oh
HI THERE EVERYONE
' }); w.show();
Dalam Window juga bisa kita atur layoutnya
var w = new Ext.Window({ layout: 'form', items:[ { xtype: 'textfield', fieldLabel: 'First Name'}, new Ext.form.TextField({fieldLabel: 'Surname'}) ] }); w.show();