Form Sederhana Menggunakan ExtJS

Melanjutkan tentang tutorial mengenai ExtJS saya yang pertama mengenai Progress Bar, sekarang saya akan memberikan tutorial sederhana bagaimana membuat Form di ExtJS.

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">

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 :) !!

Membuat Aplikasi Progress Bar di Framework ExtJS

Berhubung saya sedang melakukan riset mengenai AJAX dan penggunaan framework ExtJS di jTechnopreneurship gunadarma, tidak ada salahnya untuk memposting laoran saya ke dalam blog. Itung-itung bisa share ke orang yang lebih banyak lagi. Kali ini saya mencoba menggunakan framework ExtJS untuk pertama kalinya.





Apa itu ExtJS?

ExtJs merupakan sebuah framework Javascript yang dapat digunakan untuk pembuatan web interaktif dengan menggunakan metode Ajax, DHTML dan DOM.

ExtJs mengandung beragam widget yang dapat langsung digunakan di aplikasi web, seperti :

• Text field
• Data field
• Numeric field
• Listbox dan Combobox
• Radio dan Checkbox
• HTML Editor
• Grid Control
• Tree Control
• Tab Panel
• Toolbar
• Menu Aplikasi Desktop

Download dokumen lengkap : progress-bar.pdf