Salam hangat buat para blogger dari Buruh Internet ... pada kesempatan kali ini Buruh Internet akan membagikan sedikit ilmu tentang Extjs Sebenaranya Buruh Internet masih newbie juga dalam pemrograman web ini,,, tapi gak ada salahnya kan kalo Buruh Internet ingin berbagi ilmu (benar kagak?? siks...siks...siks...).

OK Kita langsung masuk aja ke materi... Materi yang akan saya bahas adalah bagaimana caranya mempercantik tampilan (form) dari Extjs. Materi ini cukup simple karena hanya manambahkan satu baris script pada codingan yang kita buat. Yang dimaksud mempercantik disini adalah merubah theme dari Extjs itu sendiri.

Untuk mendapatkan framework javascript ini, kamu bisa mendownloadnya dari websitenya langsung http://www.extjs.com/products/extjs/download.php. Oh ya disini Buruh Internet menggunakan Extjs versi 2.2.


Setelah kamu berhasil mendownloadnya maka tahap selanjutnya adalah sebagai berikut.

Berikut langkah-langkahnya:
  1. Letakkan file extjs yang barusan di download di webserver (disini saya menggunakan xampp karena sudah menyediakan sevice apache dan mysql sekaligus), letakkan dalam folder htdocs, contoh: C:\xampp\htdocs\ext-2.2
  2. Kemudian letakkan theme yang ingin anda gunakan di dalam folder resource, contoh: C:\xampp\htdocs\ext-2.2\resources. Jika temen-temen belum punya theme,, temen-temen bisa mendownloadnya free download theme extjs. Theme ini saya dapatkan dari http://www.extjs.com/
  3. Setelah itu buatlah file misalnya theme.html (ini sebagai contoh saja)
<head>
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/xtheme-vistablack/css/xtheme-vistablack.css" />
<script type="text/javascript" src="http:ext-2.2/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="http:ext-2.2/ext-all.js"> </script>
<script type="text/javascript" src="login.js"> </script>
</head>

Source code yang berwarna warna merah adalah inti dari tutorial ini.. Urutan source code diatas tidak boleh di ganti karena itu udah bawaanya extjs. Pada contoh di atas theme yang saya gunakan adalah xtheme-vistablack. Theme diatas bisa diganti sesuai dengan keinginan temen-temen.
Berikut screenshot dari beberapa theme yang saya dapatkan dari http://www.extjs.com/.

More about extjs theme click here

Free download theme extjs




xtheme-vistaglassxtheme-vistablue
xtheme-vistablackxtheme-slate
xtheme-olivextheme-black
Free download theme extjs
Title: Free Download Theme Exjs
Posted by faisal

Thanks for reading about Free Download Theme Exjs

+ comments + 10 comments

Anonymous
January 28, 2009 at 1:36 AM

mantap gan... keep posting..

February 11, 2009 at 11:18 PM

thank you infonya bro...
btw, source nya g bisa di download ya...

Anonymous
March 25, 2009 at 11:45 AM

bisa bro, yaitu di tutorial selanutnya :-*

April 21, 2009 at 9:25 PM

saya udah coba mas, extjs 2.0 berat kl buat website.. waktu loadingnya..
kl di localhost sih emang gak berasa :D

Anonymous
December 22, 2009 at 8:09 AM

wah aq coba kok layar putih aja masalahx apa ya???

May 17, 2010 at 1:12 AM

Gan theme2 nya udah lama tuh.. coba diupdate lagi gan !





Best Regards,

CO FOUNDER ExtJsTutorial.com

November 25, 2010 at 3:37 AM

mas untuk download ext-js 2.x masih ada link nggak saya butuh themenya soalnya

November 26, 2010 at 1:47 PM

@yang di atas

waduh ane juga udah g punya linknya. saya juga udah pakek versi yang terbaru.

May 31, 2012 at 9:00 PM

permisi mohon bantuannya, mau nanya ni klo yang diwarnain layout di extjs tu caranya gimana ya mas2 semua? :) makasi

Anonymous
January 24, 2013 at 10:27 PM

Misi Gan,
Buat Nambahin:
http://extbuilder.dynalias.com/springapp/mainpage.htm

Post a Comment