Pengalaman Belajar Extjs
Mar. 28, 2010
Awalnya saya sempat binggun apa sih itu Extjs....?
ternyata setelah saya searching di google, ternyata saya mendapatkan jawabannya.
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.
Setelah saya tau apa sih itu Extjs, kemudian saya mencoba untuk menampilkan kotak dialog berisikan tulisan Hello word.
Berikut langkah-langkahnya :
1. Pertama sebelum memulai ada beberapa hal yang perlu di siapkan sebelum mempelajari Extjs
setelah itu 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
Hasilnya sebagai berikut
