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
}
.edit-grid{
background-image:url(./b_edit.png) !important;//icon edit
}
</style>

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',
store:new Ext.data.SimpleStore({
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',
anchor:'95%',
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',
handler:function(){
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..');
GrupStore.load({params:{start:0,limit:5}});
window.hide(); //window akan tertutup
//BiodataCreateForm.getForm().reset();
},
failure: function(sa, o){ //jika tidak sukses maka akan muncul warning....
Ext.MessageBox.alert('Warning','Edit Laporan Gagal...');
}
})
}
},{
text: 'BATAL',
handler: function(){
window.hide();
}
}]
}]


after that load edit form in ext windows

var window = new Ext.Window({
title: 'Edit Input',
width: 340,
height:300,
minWidth: 300,
minHeight: 300,
layout: 'card',
plain:true,
bodyStyle:'padding:3px;',
buttonAlign:'center',
closeAction:'hide',
modal: true,
animCollapse:true,
activeItem:0,
items: [
editForm
]
});


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.

query:

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

update function used to update data

query:

$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:


$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

+ comments + 19 comments

Anonymous
February 13, 2009 at 7:52 PM

thanks mas... Cukup jelas, dan bisa dipahami. b-(

Anonymous
February 14, 2009 at 2:07 PM

yup sama-sama

Anonymous
March 6, 2009 at 12:15 AM

wah masih bingung ~x( yah habis download gak jalan di localhost, maklum baru lihat kok bagus tolong bantu dong apa aja yang harus disiapkan agar bisa jalan

Anonymous
March 6, 2009 at 4:05 PM

wah anda harus punya installernya dulu. downlaod di www.extjs.com setelah itu sesuaikan versinya, sekarang sudah ada versi terbaru. selamat mencoba

April 1, 2009 at 1:32 AM

vfbgv :-o

April 12, 2009 at 6:44 PM

mas ..
tampilin contoh yang pake TabPanel donk...
agak bingung ney ga tampil aja ..
tolongin y mas..

Anonymous
May 3, 2009 at 10:10 PM

bos, kalo engine nya pake java gmn ya bos?

soale di php kan nyimpen datanya diarray "$arr[] = $rec;" abis itu diencode make json.php

kalo boleh minta ym nya donk, mau tanya2 neh

Anonymous
July 1, 2009 at 9:56 PM

aq nyoba extjs make apache2triad. koq datanya g' tampil. knapa ya?

Suri
January 3, 2010 at 1:42 AM

Wah muantap nich Om, sy newbie baru mau pake extjs dari baca aja kyknya sy udah ngerti, makasih banyak Om.

Anonymous
February 24, 2010 at 6:56 AM

you have a wonderful site!

February 26, 2010 at 9:09 PM

thanks

September 1, 2010 at 9:19 PM

Bro.. Faisal kok form editnya ga tampil yaaa? saya pake extjs 3.2.1

March 22, 2011 at 2:07 AM

mas..aku browsing diweb'nya sampyn yg mbahas masalah extjs, kok mesti tiap mo download source mesti tulisannya "cannot find" / dokumen tidak ditemukan.

mungkin masnya kalo tidak keberatan bisa kirimi source'nya ke emailku empugandring.sgs@gmail.com

tengkyu

December 10, 2011 at 11:12 PM

Reupload Please,
Link Expired .

Anonymous
December 13, 2011 at 2:06 AM

mas, sourcodenya ko' gak di download.. mohon di upload lagi mas bwt belajar, maklum pemula.. :)

Anonymous
December 13, 2011 at 2:09 AM

mohon diupload kembali mas, saya mau download bwt belajar, maklum pemula..hehehe :)

January 26, 2012 at 1:16 AM

OM link downloadnya ko g ada?????

February 1, 2012 at 2:50 PM

Bapak Kahayan-Faisal Yth,
Kami ingin download sourcecode
"Form Edit, Delete, Add, Seach, Download Extjs (Bagian 1): Form Edit Exjs" tapi menerima pesan seperti ini
The file You are looking for... may be deleted by the user or by the Administrator !
Kalau boleh kami mohon dikirimi untuk belajar dari Bapak Yth
hormat kami : usmanhalalwathoyib@ymail.com

March 15, 2012 at 7:53 PM

Untuk mendownload source codenya bisa langsung kesini

Post a Comment