Today i will continue my previous tutorial about edit, delete file using extjs and php. And In this section we will learn about how to make function add file in extjs.

Below I only include a snippet from the sourcecode, for the full source code you can combine with the previous tutuorial.

create html code
1. index.html

after that create javascript file..

//.....
var simpleAdd = new Ext.FormPanel({
url:'simplegrid.php?act=add',
width: 340,
height:160,
frame: true,
labelWidth: 95,
defaults: {

allowBlank: false

},
items: [{

xtype: 'textfield',
fieldLabel: 'Name',
anchor: '70%',
name: 'name'
},
{
xtype: 'textfield',
fieldLabel: 'Address',
anchor: '70%',
name: 'address'
},
{

fieldLabel: 'Email',
anchor: '70%',
name: 'email',
xtype:'textfield',
vtype:'email'

}],
buttons: [{
text: 'Save',
handler: function(){
if(simpleAdd.getForm().isValid()){
simpleAdd.getForm().submit({
waitMsg: 'Uploading your photo...',
success: function(simpleAdd, o){

Ext.MessageBox.alert('Creation OK','Add file Success..');
SimpleDataStore.reload();
SimpleWindow.hide();

},
failure: function(simpleAdd, o){
Ext.MessageBox.alert('Warning','Add file Failur...');
}
});
}
}
},{
text: 'Reset',
handler: function(){
simpleAdd.getForm().reset();
}
}]
});

var SimpleWindow= new Ext.Window({
title: 'Form Add File',
closable:true,
closeAction:'hide',
width: 340,
height:160,
layout: 'fit',
modal: true,

items: simpleAdd
});

function displayFormWindow(){
if(!SimpleWindow.isVisible()){
SimpleWindow.show();
} else {
SimpleWindow.toFront();
}
}
//........
tbar:[
{
text:'Edit',
iconCls:'edit-grid',
handler: function()
{
var m = SimpleListingEditorGrid.getSelections();
if(m.length > 0)
{
formEdit.getForm().load({url:'simplegrid.php?act=get&id='+ m[0].get('id'), waitMsg:'Loading'});
window.show();
}
else
{
Ext.MessageBox.alert('Message', 'please... Choose one of file...!');
}

}

},'-',
{
text:'Delete',
iconCls:'delete',
handler: function()
{
var m = SimpleListingEditorGrid.getSelections();
if(m.length > 0){
Ext.MessageBox.confirm('Message', 'are you sure to delete this file?' , del);
}
else{
Ext.MessageBox.alert('Message', 'please... Choose one of file...!');
}
}

},'-',
{
text: 'Add',
iconCls:'add',
handler: displayFormWindow
}

],

after that create php file….

//....
else if($_GET["act"] == "add"){
$sql = "INSERT INTO simpleform (`id`,`name` ,`address` ,`email`) VALUES (NULL,'".$_POST["name"]."', '".$_POST["address"]."', '".$_POST["email"]."')";
mysql_query($sql) or die(mysql_error());
echo "{success:true}";
}

//....

below are some the screen shot of this tutorial

Tags: Alert Message, Amp, Anchor, Choose One, Creation, Delete File, Email, extjs, Failure, File Delete, Handler Function, HTML, JavaScript, Load Url, Photo, PHP, Snippet, Source code, Sourcecode, Success

Incoming search terms for the article:

extjs iconCls , editing database from extjs formpanel , extjs window submit , updating extjs formpanel , getform extjs , extjs database , extjs editable grid php , iconcls extjs , extjs grid dblclick , extjs and Database , extjs grid database , extjs getForm() load , extjs grid submit , extjs window loading , extjs grid image delete , extjs window isvisible , extjs gridpanel url edit , extjs window examples , extjs grid getId , extjs tutorials add on , ExtJS this getForm() load({ , extjs textfield editable Grid , extjs textfield editable , extjs iconCls in window , extjs submit to delete , extjs rowexpander as editable grid , extjs reset file textfield , extjs remove iconCls , extjs iconcls user , Extjs window toFront , extjs xtype getform load , menampilkan database mysql dengan ext js 2 2 , PHP form add edit delete sql , php grid add delete and edit , php mysql jquery add edit update delete , php script for add edit delete , put top image extjs window , reload image in form panel after submit extjs , Row Edit Delete and Update javascript php , SimpleListingEditorGrid getSelections(); is not a function , update database after edit extjs , file upload handler using extjs , include html extjs , file upload extjs asp net , getForm() load extjs , getForm() load extjs grid , grid add edit delete update mysql with php jquery , GridPanel extjs edit , how to create ext window in asp net , how to edit grid in extjs extjs themes , extjs file upload , extjs theme , extjs upload , extjs upload file , extjs grid checkbox , extjs tutorial , extjs login , extjs login form , extjs grid paging exjs file upload , getForm() load({url:simplegrid php?act=get&id= m[0] get(id) waitMsg:Loading}); , extjs get grid row height , submit grid checkbox extjs , extjs grid checkbox submit , extJS login demo not work in 3 1 , upload xls file using extjs , extjs CheckboxSelectionModel color , extjs form load callback , upload file extjs tutorial 

This entry was posted by faisal at on Wednesday, February 18th, 2009 at 6:24 pm and is filed under Tutorial Extjs, Tutorial HTML, Tutorial PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.