ExtJS Tutorial- Hello World!!!

Kalian tentu sudah melihat sample-sample tampilan ExtJS yang telah saya singgung di artikel sebelumnya ExtJS | aplikasi web layaknya aplikasi desktop.

Dengan tampilan yang sangat menarik dari ExtJS yang terlihat layaknya sebuah aplikasi desktop, pastinya kalian tidak sabar untuk cepat-cepat mencoba bagaimana membuatnya?… 😀 (sok teu)

Mari deh kita langsung mencoba membuat tampilan seperti yang dicontohkan oleh ExtJS. Tentu kita sudah tidak asing lagi dengan Hello World!!! yang sudah menjadi standard di dunia pemrograman untuk memulai belajar pemrograman.

Dan artikel kali ini akan kita mulai dengan membuat Window yang akan menampilkan tulisan “Hello World!!!” dalam beberapa cara.  Versi ExtJS yang saya pergunakan adalah ext-3.3.1. Asumsinya “ext-3.3.1” adalah hasil donlod source ExtJS.

Oke, langkah awal kita adalah menyiapkan file-file utama ExtJS sebagai berikut:

  1. Tentu Anda telah mendonlod file source ExtJS di artikel sebelumnya.
  2. Buat folder bernama “extjs-learn” (nama folder terserah Anda), yang nantinya kita isi dengan folder-folder aplikasi yang akan kita coba.
  3. Buat folder “assets” di dalam “extjs-learn”, dan di dalam “assets” isikan dengan folder: “css”, “images”, dan “js”.
  4. Copy Paste file “ext-3.3.1/ext-all.js” ke dalam folder “assets/js” yang telah dibuat di langkah-3.
  5. Copy Paste file “ext-3.3.1/adapter/ext / ext-base.js” ke dalam folder “assets/js”.
  6. Copy Paste file “ext-3.3.1/resources/css/ ext-all.css” ke dalam folder “assets/css”.
  7. Copy Paste folder “ext-3.3.1/resources/images/default” ke dalam folder “assets/images”.

Folder-folder yang kita buat akan seperti berikut:

File-file utama dari ExtJS adalah ext-all.css, ext-base.js, dan ext-all.js yang sudah kita masukkan ke dalam folder “assets”. Sedangkan “HelloWorld” adalah salah satu wadah hasil pelajaran pemrograman ExtJS pertama kita.

File-file utama ExtJS akan kita tambahkan ke setiap halaman aplikasi yang akan kita buat :

  • ext-all.css : sebuah file yang akan mengontrol tampilan. Kita tidak perlu melakukan perubahan pada file ini. Jika ingin menambahkan class css, silakan buat file .css yang baru.
  • ext-base.js : file yang menyediakan fungsi-fungsi inti dari ExtJS.
  • ext-all.js : kumpulan komponen yang mendukung graphical user interface (GUI).
Baca Juga:  Menggunakan git branch dengan Optimal

Setelah file-file utama ExtJS sudah siap, maka kita lanjutkan dengan membuat Hello World!!!

“Hello World!!!” menggunakan fungsi Message Box :

  1. Buat folder “HelloWorld” di level tempat yang sama dengan “assets”
  2. Buat file “HelloWorld/hello-alert.js”
  3. Buat file “HelloWorld/hello-alert.html”

hello-alert.js :

Ext.onReady(function(){
    Ext.Msg.alert("Status", "Hello World!!!.......");
});

Atau bisa juga dengan yang berikut :

Ext.onReady(function(){
    Ext.Msg.show({
		title:'Status',
		msg: 'Hello World!!!.......',
		buttons: Ext.Msg.YESNOCANCEL,
		//fn: processResult, //Fungsi yang akan memproses jika tombol dialog dieksekusi
		animEl: 'elId',
		icon: Ext.MessageBox.QUESTION
	});
});

hello-alert.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/ext-all.css" />
    <script type="text/javascript" src="../assets/js/ext-base.js"></script>
    <script type="text/javascript" src="../assets/js/ext-all.js"></script>

    <script language="javascript" src="hello-alert.js"></script>
</head>

<body>
<!--Tidak perlu ditambahkan -->
</body>
</html>

Silakan kalian jalankan dengan membuka file hello-alert.html di browser.

“Hello World!!!” menggunakan fungsi Window :

  1. Buat file “HelloWorld/hello-window.js”
  2. Buat file “HelloWorld/hello-window.html”

hello-window.js :

Ext.onReady(function(){
    var win;

	win = new Ext.Window({
		applyTo:'hello-win',
		layout:'fit',
		width:500,
		height:300,
		closeAction:'hide',
		plain: true,
		autoShow: true,

		items: new Ext.FormPanel({
			frame: true,
			applyTo: 'hello-panel',
			items: [{html:'<div align="center"><font size="+2">Hello World!!!...........</font></div>'}]
		}),

		buttons: [{
			text:'Submit',
			disabled:true
		},{
			text: 'Close',
			handler: function(){
				win.hide();
			}
		}]
	});
	win.show();
});

hello-window.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/ext-all.css" />
    <script type="text/javascript" src="../assets/js/ext-base.js"></script>
    <script type="text/javascript" src="../assets/js/ext-all.js"></script>

    <script language="javascript" src="hello-window.js"></script>
</head>

<body>
<div id="hello-win" class="x-hidden">
    <div class="x-window-header">Hello Dialog</div>
    <div id="hello-panel"></div>
</div>
</body>
</html>

Setiap kode ExtJS akan mengeksekusi kode-kode yang ada di “Ext.onReady(function(){ /* kode aplikasi ada di sini */})

Di dalam file hello-window.js ada properti komponen applyTo:’hello-win’, akan mengharuskan mendeklarasikan id=”hello-win” di dalam file hello-window.html. Ext.Window dan Ext.FormPanel akan selalu menggunakan “applyTo” untuk menampilkannya di browser.

Untuk lebih jelas dan kalian bisa mencoba properti-properti yang lainnya, silakan membaca API Documentation: ext-3.3.1/docs/

Silakan kalau ada temen-temen yang lain yang sudah pernah membuat aplikasi menggunakan ExtJS untuk berbagi di sini, dan bisa mengoreksi artikel ini jika ada yang salah.

Selamat belajar!……dan tunggu artikel selanjutnya.

Komentar

comments

grain storage instagram türk takipçi satın al