Memulai Ext JS (Hello World!)

En

Setelah dua hari yang lalu mengunduh ExtJS (baca disini) dan kemarin sempat utak-atik Netbeans supaya terintegrasi dengan ExtJS namun akhirnya gagal. Malam ini bertekad minimal bisa keluar kotak dialog “Hello World!”.

Berikut ini langkah yang saya lakukan :

  1. Ekstrak .zip ExtJS.
  2. Buat project baru di Netbeans (Dibawah project PHP)
  3. Misalkan, nama project-nya : Jawi.
  4. Salin folder dan file hasil ekstraksi pada langkah pertama pada folder dari project Jawi.
  5. Hapus file index.php pada root folder Jawi.
  6. Klik kanan pada project Jawi, pilih menu “properties“.
  7. Pilih “Run Configuration” pada Categories.
  8. Ubah index file dari nilai semula “index.php” menjadi “index.html”.
  9. Jalankan (run) project.
  10. Akan tampil halaman berikut pada web-browser :

Halaman index.html dari ExtJS

Untuk mengurangi ukuran Jawi, folder examples dan welcome dapat dihapus.

Buka file index.html. Hapus isinya, lalu ganti dengan code sebagai berikut :

<html>
<head>
   <title>Getting Started Example</title>
   <link rel="stylesheet" type="text/css"
       href="resources/css/ext-all.css" />
   <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="ext-all-debug.js"></script>
   <script type="text/javascript">
       Ext.onReady(function(){
           Ext.Msg.alert('Hello', 'World');
       });
   </script>
</head>
<body>
   <!-- Nothing in the body -->
</body>
</html>

Simpan project.

Jalankan (run) project.

Akan muncul halaman sebagai berikut :

Telah lahir kotak "Hello world!" Hehehee.. Kotak pesannya bisa digeser-geser loh!

Voila! 🙂

Klik di sini untuk tulisan lain tentang Ext JS di blog ini.

Iklan

6 thoughts on “Memulai Ext JS (Hello World!)

  1. Wahh keren, setelah melihat-lihat samplenya ternyata desktop banget yah tampilannya, saya jadi tertarik belajar extjs, base saya dari desktop programming vfp

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s