Saya mendapatkan tutorial ini di http://www.extjs.com/learn/Tutorials, disana saya mengambil sub-bab mengenai cara pembuatan form dengan ExtJS.
Untuk penginstalan / konfigurasi ExtJS awal bisa lihat di postingan saya mengenai Progress Bar.
Langsung saja pada pembuatan form yang pertama, kita membuat form sederhana dengan Submit.
Seperti biasa, buat link-link ke library extjs seperti berikut di tag <head> dari file html kita, buat saja dengan nama form.html :
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<!—Memasukkan lokasi Javascript kita yang kita buat, sesuaikan dengan nama file kita :-->
<script type="text/javascript" src="form.js"></script>
<!—Memasukkan lokasi Ext StyleSheets : -->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<!—Memasukkan lokasi Javascript kita yang kita buat, sesuaikan dengan nama file kita :-->
<script type="text/javascript" src="form.js"></script>
<!—Memasukkan lokasi Ext StyleSheets : -->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
Kemudian di tag <body> buatlah tempat untuk me-render form dengan tag <div>,
<div id="mytraditionalform"></div>
mytraditionalform merupakan id dari tag <div> yang akan dipanggil dari file Javascript.
Berikutnya buatlah file Javascript dengan nama form.js, lalu ketikkan perintah berikut,
Ext.onReady(function(){
var simple = new Ext.form.FormPanel({
standardSubmit: true,
frame:true,
title: 'Register',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'NPM',
name: 'npm',
allowBlank:false
},
{
fieldLabel: 'Nama',
name: 'nama',
allowBlank:false
},
{
fieldLabel: 'Kelas',
name: 'kelas',
allowBlank:false
},
{
fieldLabel: 'Alamat',
name: 'alamat',
allowBlank:false
},
{
inputType: 'hidden',
id: 'submitbutton',
name: 'myhiddenbutton',
value: 'hiddenvalue'
}
],
buttons: [{
text: 'Submit',
handler: function() {
simple.getForm().getEl().dom.action = 'hasil.php';
simple.getForm().getEl().dom.method = 'POST';
simple.getForm().submit();
}
}]
});
simple.render('mytraditionalform');
});
Yang terakhir, kita buat file hasil.php untuk mendapatkan hasilnya.
<?php
$npm = $_POST["npm"];
$nama = $_POST["nama"];
$kelas = $_POST["kelas"];
$alamat = $_POST["alamat"];
echo "NPM kamu ".$npm."<br/>";
echo "Nama kamu ".$nama."<br/>";
echo "Kamu kelas ".$kelas."<br/>";
echo "Alamat kamu di ".$alamat."<br/>";
?>
Dan lihat outputnya.. Selamat Mencoba :) !!
