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.
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:
- 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
- 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/
- 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>
<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/.
Berikut screenshot dari beberapa theme yang saya dapatkan dari http://www.extjs.com/.
More about extjs theme click here
Free download theme extjs
xtheme-vistaglass | xtheme-vistablue |
xtheme-vistablack | xtheme-slate |
xtheme-olive | xtheme-black |
+ comments + 10 comments
mantap gan... keep posting..
thank you infonya bro...
btw, source nya g bisa di download ya...
bisa bro, yaitu di tutorial selanutnya :-*
saya udah coba mas, extjs 2.0 berat kl buat website.. waktu loadingnya..
kl di localhost sih emang gak berasa :D
wah aq coba kok layar putih aja masalahx apa ya???
Gan theme2 nya udah lama tuh.. coba diupdate lagi gan !
Best Regards,
CO FOUNDER ExtJsTutorial.com
mas untuk download ext-js 2.x masih ada link nggak saya butuh themenya soalnya
@yang di atas
waduh ane juga udah g punya linknya. saya juga udah pakek versi yang terbaru.
permisi mohon bantuannya, mau nanya ni klo yang diwarnain layout di extjs tu caranya gimana ya mas2 semua? :) makasi
Misi Gan,
Buat Nambahin:
http://extbuilder.dynalias.com/springapp/mainpage.htm