Now we will learning how to make edit form in extjs.

Steps to make the edit form is as follows extjs:

1. Select the file you want to edit (to get its id). If this step is not done then there will be alert as a screen shot below:

2. Then we press the button to edit. when we press this button then it will be requesting data from the database in accordance with his id. and will appear as a snapshot of the new form below
3. Then we replace the data were in accordance with what we want, and press the save button to save or cancel button, if not so keep it

4. When we press the save button, and the storage process successful it will appear snaphot alerts as follows:

Below is a piece of the program:

1. index1.php

<script type="text/javascript" src="group.js"></script> //memanggil file "group.js" form utama
<style type="text/css"> //css buat untuk tampilan icon
.icon-grid {
background-image:url(./grid.png) !important; //icon grid
background-image:url(./b_edit.png) !important;//icon edit

2. group.js

because the file "group.js" in the previous tutorial is on explain it here I will only explain that there is additional to the tutorial, which is making editnya form.

a. create var field

var idfield;
var namafield;
var alamatfield;
var angkatanfield;

idfield = new Ext.form.Hidden({ //form ini akan di hidden, lihat form edit diatas, id tidak di tampilkan
maxLength: 20,
name: 'id',
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
namafield = new Ext.form.TextField({ //form texfield
fieldLabel: 'Nama', //nama label
maxLength: 20,
name: 'nama', //nama field harus esuai dengan database
allowBlank: false, //tidak boleh kosong
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/ // isi dari textfield dalam rank disamping
alamatfield = new Ext.form.TextField({
fieldLabel: 'Alamat',
maxLength: 20,
name: 'alamat',
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
angkatanfield = new Ext.form.ComboBox({ //form comboBox digunkan untuk drop down list
fieldLabel: 'Angkatan',
fields:['angkatanValue', 'angkatanName'],
data: [['1','2002'],['2','2003'],['3','2004'],['4','2005'],['5','2006'],['5','2007']] //isi dari comboBox
mode: 'local',
displayField: 'angkatanName',
name: 'angkatan',
valueField: 'angkatanValue',
triggerAction: 'all'

after that create anel form


the contain of panel form are as follow

items: [{
layout: 'form',
border: false,
items: [idfield,namafield,alamatfield,angkatanfield], //memanggil field yang kita buat tadi di atas

buttons: [{
text: 'SIMPAN',
editForm.getForm().submit({ //isi dari form edit akan di submit ke database,
url: 'group.php', //memanggil file group.php
params: {
task: "UPDATEPRES" // fungsi update yang ada di group.php.
waitMsg:'Menyimpan Data...',
success: function(sa, o){ // jika proses penyimpanan sukses maka akan muncul alert seperti di bawah ini
Ext.MessageBox.alert('Simpan OK','Edit Laporan Berhasil..');
window.hide(); //window akan tertutup
failure: function(sa, o){ //jika tidak sukses maka akan muncul warning....
Ext.MessageBox.alert('Warning','Edit Laporan Gagal...');
text: 'BATAL',
handler: function(){

after that load edit form in ext windows

var window = new Ext.Window({
title: 'Edit Input',
width: 340,
minWidth: 300,
minHeight: 300,
layout: 'card',
modal: true,
items: [

3. group.php

in a file "group.php" there are 3 fnction, edit function, update, getlist.

edit function used to load a data that we want to edit.


$sql = "select * from grp where id = '".$_GET["id"]."'";

update function used to update data


$query = "UPDATE grp SET nama = '".$_POST["nama"]."', alamat ='".$_POST["alamat"]."',angkatan ='".$_POST["angkatan"]."' where id= '".$_POST["id"]."'";

getlist function used to display all contain from database in grid


$query = "SELECT * FROM grp";

Download Cara membuat add, edit dan delete menggunakan extjs dan php

Title: Form Edit, Delete, Add, Seach, Download Extjs (Bagian 1): Form Edit Exjs
Posted by faisal

Thanks for reading about Form Edit, Delete, Add, Seach, Download Extjs (Bagian 1): Form Edit Exjs