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 :) !!
3 komentar:
pernah coba di JSP gan
Mas bro, salam kenal, ane masih newbie nih di ExtJS, ane dah coba tutorial diatas, untuk form.html bisa tapi kok pas click tombol submit gak ke load ya hasil.php nya???
Mantap gan tutorialnya, ane coba ya
Posting Komentar