Beranda > Sencha > Tutorial ExtJS

Tutorial ExtJS

ExtJS adalah library dari (framework) javascript yang sangat powerfull yang dapat menyederhanakan pembuatan aplikasi web berbasis AJAX. Selain mempermudah proses request dan response secara asynchronous, ExtJS juga dapat 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 terkenal sebagai framework javascript yang kaya komponen UI, bagaimana pun meletakan komponen ExtJS di browser tidak semudah menempelkan komponen di delphi atau vb, Kita harus menuliskan sederetan object JSON di sana. Nah untuk hal-hal seperti ini, akan lebih baik jika kita memiliki class yang dikonfigurasi terlebih dahulu sehingga kita tidak perlu menuliskan hal yang sama berulang-ulang.

ExtJS dapat dijalankan pada semua web browser yang populer saat ini dengan tampilan yang sama antar browser (cross browser). Beberapa browser yang mendukung ExtJS diantaranya :

1. IE > versi 6

2. Mozilla Firefox > versi  1.5

3. apple safari > versi 2

4. opera > versi 9

Seperti kebiasaan sebelumnya, saat orang baru mempelajari sebuah bahasa pemrograman, maka akan membuat sebuah program “hello world”, maka kita juga akan mencoba membuat sebuah “hello world” dengan ExtJS.

Sebelum kita mulai, beberapa hal yang perlu kita siapkan sebelum mempelajari ExtJS adalah :

1. ExtJS

2. Web server

3. web browser

4. kopi dan snack

Buat sebuah file dengan nama hello.html dengan editor anda. Untuk bisa bekerja dengan ExtJS kita harus melakukan link ke beberapa file seperti berikut :

<link rel=”stylesheet” type=”text/css” href=”ext-all.css” />

<script src=”ext-all-debug.js”></script>

secara lengkap file hello.html :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Extjs 4 Hello World Tutorial</title>

<link rel=”stylesheet” type=”text/css” href=”ext-all.css” />

<script type=”text/javascript” src=”ext-all-debug.js”></script>

<script type=”text/javascript”>
Ext.onReady(function(){
Ext.Msg.show({
title: “Greeting Extjs User”,
msg: “Hello World, Welcome to Extjs. Isn’t Cool?”,
icon: Ext.Msg.INFO,
buttons: Ext.MessageBox.OK
});
});

</script>
</head>

<body>
</body>
</html>

Kategori:Sencha
  1. wahidin
    Desember 19, 2014 pukul 12:25 pm

    punya tutorial crud extjs ??

  2. Mei 2, 2016 pukul 8:30 pm

    ga ada bro, googling aja ya

  1. No trackbacks yet.

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

%d blogger menyukai ini: