Hello semua developer website di negeri ini khusunya para calon developer website yang masih bernaung di Gunadarma sebagai mahasiswa, yuk mari kita ngoprek tentang EXTJS. Apa ada waktu untuk meluangkan waktu bergadang tiap malam…seperti bang haji rhoma bilang dalam lagunya “Bergadang jangan bergadang kalau tiada artinya” nie mau ngoprek berarti ada artinya donk… hehehe ayoek ikutan….

Okeh di sini gw ajarkan bagaimana cara memulai membuat project dengan menggunakan Framewrok EXTJS, di sini gw menggunakan EXTJS terbaru yaitu 3.1.0. Okeh tidak usah berpanjang mukadimah pada prinsipnya ada 3 file yang harus di includekan terlebih dahulu ke dalam project yang akan di buat. 3 File tersebut di antaranya, 2 file javascript dan 1 file untuk cascading style sheet atau CSS. Oh ya bagi yang belum ada file EXTJS 3.1.0 bisa di download gratis di website : http://extjs.com .

Okeh.. sebetulnya Cuma itu file yang kita butuhkan untuk memulai coding dengan EXTJS. Di sini gw membuat contoh sederhana.

A. Membuat tombol alert

File index.html

image003

<html>
<head>
<title>Membuat tombol alert</title>
<!– Mengincludekan file javascript –>
<script type=”text/javascript” src=”ext-3.1.0/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”ext-3.1.0/ext-all-debug.js”></script>
<script type=”text/javascript”>
Ext.onReady(function()
{
Ext.get(’buttonAlert’).on(’click’, function()
{
Ext.Msg.alert(”Pesan Alert”,”Ayo bergadang malam-malam”);
});
});
</script>
<!– Mengincludekan file css –>
<link rel=”stylesheet” type=”text/css” href=”ext-3.1.0/resources/css/ext-all.css”>
</head>
<body>
<h1>Membuat Tombol Alert </h1>
<input type=”button” id=”buttonAlert” value=”Click Me”>
</body>
</html>

B. Membuat paragraph Alert

image005

<html>
<head>
<title>Membuat Paragraph Alert</title>
<!– Mengincludekan file javascript –>
<script type=”text/javascript” src=”ext-3.1.0/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”ext-3.1.0/ext-all-debug.js”></script>
<script type=”text/javascript”>
Ext.onReady(function() {
Ext.select(’p’).on(’click’, function()
{
Ext.Msg.alert(”Hanya Info”,”Anda sudah mengklik Paragraph”);
});
});
</script>
<!– Mengincludekan file css –>
<link rel=”stylesheet” type=”text/css” href=”ext-3.1.0/resources/css/ext-all.css”>
</head>
<body>
<h1>Membuat Paragraph Alert</h1>
<p>Hello semua developer website di negeri ini, yuk kita ngoprek tentang EXTJS. Apa ada waktu untuk meluangkan waktu bergadang tiap malam…seperti bang haji rhoma bilang dalam lagunya “Bergadang jangan bergadang kalau tiada artinya” nie mau ngoprek berarti ada artinya donk… hehehe
</p>
</body>
</html>

C. Membuat Paragraph HightLight

image007

<html>
<head>
<title>Membuat Paragraf Hightligt</title>
<!– Mengincludekan file javascript –>
<script type=”text/javascript” src=”../../ext-3.1.0/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”../../ext-3.1.0/ext-all-debug.js”></script>
<script type=”text/javascript”>
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select(’p’).on(’click’, paragraphClicked);
});
</script>
<!– Mengincludekan file css –>
<link rel=”stylesheet” type=”text/css” href=”../../ext-3.1.0/resources/css/ext-all.css”>
</head>
<body>
<h1>Membuat Paragraf HightLigt</h1>
<p>Hello semua developer website di negeri ini, yuk kita ngoprek tentang EXTJS. Apa ada waktu untuk meluangkan waktu bergadang tiap malam…seperti bang haji rhoma bilang dalam lagunya “Bergadang jangan bergadang kalau tiada artinya” nie mau ngoprek berarti ada artinya donk… hehehe
</p>
</body>
</html>
Okeh sekian dulu dari gw.., nie masih malam pertama. Malam besok saya akan ajarkan bagaimana cara membuat Form. Apabila belum mengerti bisa hubungi gw di sini :

Email :spidolpermanen@gmail.com

Iklan