Tutorial ExtJS bagian 1: Berkenalan dengan ExtJS (Hello World with ExtJS)
Ditulis oleh Yudianto Sujana di/pada Februari 26, 2009
Teman saya seorang web developer pernah menyarankan saya untuk belajar tentang ExtJS, karena banyak kesibukkan, baru beberapa hari belakangan ini saya sempet belajar tentang ExtJS. Begitu mulai mengenal tentang ExtJS saya mulai menyadari bahwa apa yang disarankan teman saya itu ternyata benar (thanks om). Setelah membaca beberapa tutorial dan mencobanya secara langsung, saya mulai menikmati membuat aplikasi web dengan ExtJS, karena hanya dengan sedikit usaha, saya bisa membuat sesuatu yang hebat.
Oke cukup curhatnya 
sekarang saya ingin membagikan sedikit dari apa yang sudah saya pelajari tentang ExtJS.
“Apa itu ExtJS?” pertanyaan itu mungkin yang pertama kali muncul saat membaca judul artikel ini. Pertanyaan yang sama juga saya tanyakan kepada teman saya saat dia memberitahu tentang 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
Saat ini ExtJS sudah sampai versi 2.2.1 yang dapat didownload di extjs.com
Seperti kebiasaan sebelumnya, saat orang yang baru mempelajari sebuah bahasa pemrograman, maka akan membuat sebuah program “Hello World”, maka kita juga akan mencoba membuat sebuah “Hello World” dengan ExtJS.
Sebelum mulai, beberapa hal yang harus kita siapkan sebelum mempelajari ExtJS adalah:
- ExtJS
- Web Server, contohnya apache. Untuk mempermudah dapat menggunakan XAMPP
- Editor, saya menggunakan Netbeans 6.5
- Web browser
- Kopi & snack
Setelah peralatan lengkap, saatnya kita beraksi 
Pertama buatlah sebuah folder di htdocs, kita beri nama belajarextjs saja biar mudah mengingatnya. Setelah itu ekstraklah ExtJS ke dalam folder yang baru kita buat, lalu ubah nama foldernya menjadi extjs.
Buat sebuah file dengan nama hello.html dengan editor anda. Untuk bisa bekerja dengan ExtJS kita harus melakukan link kebeberapa file seperti 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>
Link ke file ext-all-debug.js hanya dilakukan pada saat pengembangan, jika aplikasi sudah selesai dan siap online, link tersebut harus diganti ke file ext-all.js
Berikutnya kita akan membuat skrip untuk menampilkan pesan “Hello World”.
Tambahkan kode berikut ini dibawah link ke ExtJS
<script>
Ext.onReady(function() {
Ext.Msg.alert('Pesan', 'Hello World');
});
</script>
Secara lengkap file hello.html akan berisi seperti ini
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></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', 'Hello World');
});
</script>
</head>
<body>
</body>
</html>
Setelah selesai simpan file dan coba jalankan di browser anda dengan mengetikkan http://localhost/belajarextjs/hello.html
Oke sekian dulu tutorial ExtJS bagian 1 ini, selamat belajar
linggis berkata
wah…baru tau pak apa itu extjs.btw extjs gratis jg ya pak?
Rudi
Yudianto Sujana berkata
Gratis, lisensinya ada 2, Opensource dan komersial http://extjs.com/products/license.php
jadi kalo mau jual aplikasi kita tapi kita ga mau ngasih source code, kita pake lisensi komersial, artinya kita harus bayar
tapi saya rasa yang opensource aja cukup
Tutorial ExtJS bagian 2: Hello World to AJAX « yBlog - IT is Simple berkata
[...] ExtJS bagian 2: Hello World to AJAX Maret 4, 2009 — Yudianto Sujana Pada tutorial sebelumnya kita sudah mencoba bagaimana membuat sebuah “Hello World” dengan ExtJS. Pada tutorial kali ini [...]
chandraph berkata
om…
tolongin donk ..
contoh extjs yang lainnya ..
yang pke Tabs gtu ..
butuh ney om lagi PKL ..
vas berkata
Welcome to ExtJs Club
buna BC berkata
Ya interface extjs memang menarik. Saya juga baru belajar extjs dan kini I’m trying to integrate extjs in stripes framework.- it’s quite difficult because I’m a javascript beginner.
Mbah Iyet` berkata
KAYAKNYA MANTEB JUGA TU ILMU ANYAR. PERLU DIUPLEK-UPLEK N DIPLAJARIN BIAR GA KATROK N GATEK…
LANJUTKAN DENGAN TUTOR2 LAIN YG LEBIH HOT, SENANG MEMBACANYA !
SUKSES !
mbahsomo berkata
Numpang lewat, sambil promosi tutorial Saya tentang ExtJS
System Informasi sekolah dengan Jsp, Ireport, tomcat, Extjs
Alamat http://mbahsomo.co.cc/news/2008-09-24-8
Herry berkata
Ext JS emang bagus, tapi liat kebutuhan sih, klo untuk website lokal sih ngak masalah karena yang akses yang banyak, soalnya file library Ext JS yang banyak dan besar2, jadi bikin lama klo di load di website, klo local sih ngak terasa karena cepet, cuma skr banyak ngak konsumen minta aplikasi nya menggunakan Ext JS ?
mesa berkata
pagi, saya orang baru nih,
boleh minta tutorial lain g, contohnya but ngerubah tampilan yang lebih bagus (bukan yg themes doang, tapi cara nambahin icon dll)
kalu bisa, ada contoh website yg udah pake extjs g.
trus yang ketiga, ada yang pernah bikin fitur ngrim pesan pake extjs? tolong di-share dong, makasi
ian berkata
ikutan gabung ah. kmrn sy coba bikin aplikasi asp.net base, trus sy tambahin Layout dari Extjs. tp pas saya tambahin control button asp.net, ga mau di kasi Event onclick, tolong pencerahannya
Yudianto Sujana berkata
Kalo menurut saya jika sudah menggunakan ExtJs ga perlu lagi pakai komponennya asp.net, lebih baik di client semuanya murni extjs, jadi kalo di servernya mau ganti teknologi ga berpengaruh ke client
mbahsomo berkata
pren bisa ngak file ext-all-debug.js tuh di kurangi besar banget filenya.
saya telah coba di http://extjs.com/products/extjs/build/ tapi hasil masih kacau ada yang error untuk beberapa paketnya salam