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
Posted by faisal
Thanks for reading about Form Edit, Delete, Add, Seach, Download Extjs (Bagian 1): Form Edit Exjs
+ comments + 19 comments
thanks mas... Cukup jelas, dan bisa dipahami. b-(
yup sama-sama
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
wah anda harus punya installernya dulu. downlaod di www.extjs.com setelah itu sesuaikan versinya, sekarang sudah ada versi terbaru. selamat mencoba
vfbgv :-o
mas ..
tampilin contoh yang pake TabPanel donk...
agak bingung ney ga tampil aja ..
tolongin y mas..
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
aq nyoba extjs make apache2triad. koq datanya g' tampil. knapa ya?
Wah muantap nich Om, sy newbie baru mau pake extjs dari baca aja kyknya sy udah ngerti, makasih banyak Om.
you have a wonderful site!
thanks
Bro.. Faisal kok form editnya ga tampil yaaa? saya pake extjs 3.2.1
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
Reupload Please,
Link Expired .
mas, sourcodenya ko' gak di download.. mohon di upload lagi mas bwt belajar, maklum pemula.. :)
mohon diupload kembali mas, saya mau download bwt belajar, maklum pemula..hehehe :)
OM link downloadnya ko g ada?????
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
Untuk mendownload source codenya bisa langsung kesini