In the previus tutorial: Login Extjs-Confirm Password , when a user has successfully logged in, then he will go to this page. In this page a user can change his password because there is a session id to identify its.

OK.. this is the screen shot of this tutorial

The following are some of the files you need to create this tutorial.

1. Create php file

session_start();
include "koneksi.php";
if($_SESSION['name']=='')
{
header("location: index.html");
}

?>

<script src="http:ext-2.2/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="http:ext-2.2/ext-all.js" type="text/javascript"></script>
<script src="changepswd.js" type="text/javascript"></script>
<table border="0" align="center">
<tbody>
<tr>
<td></td>
</tr>
</tbody></table>

2. Create javascript file

Ext.onReady(function(){
Ext.QuickTips.init();

// Create a variable to hold our EXT Form Panel.
// Assign various config options as seen.
var login = new Ext.FormPanel({
labelWidth:130,
url:'changepswd.php',
frame:true,
title: 'please',
collapsible:true,
width:320,
autoHeight:true,
bodyStyle: 'padding: 10px 10px 0 20px;',
padding:200,
modal: true,
defaultType:'textfield',
monitorValid:true,

// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Old Password',
name:'OldPassword',
inputType: 'password',
allowBlank:false
},{
fieldLabel:'New Password',
name:'NewPassword',
inputType:'password',
allowBlank:false
}],

buttons:[{
text:'Save',
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Please wait.......',
waitMsg:'Send data...',

success:function(){
Ext.Msg.alert('Status', 'success bro.......!', function(btn, text){

login.getForm().reset();
});

},

failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Chage Password!', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText + "abcd");
}
login.getForm().reset();
}
});
}
},
{

text: 'Reset',
handler:function()
{
login.getForm().reset();
}

}]
});

var createwindow = new Ext.Window({
frame:true,
title:'Change Password',
width:330,
height:250,
closable: false,

items: login
});

createwindow.show();

});

3.  Create php file

include "koneksi.php";
session_start();
$oldpassword = $_POST["OldPassword"];    ;
$newpassword = $_POST["NewPassword"];
$query = "select password from formlogin where password='$oldpassword'";
$sql = mysql_query($query);
$ada = mysql_fetch_row($sql);

if($ada>1){
$query = "update formlogin set password='$newpassword' where id_user = '".$_SESSION['id']."'";
$sql = mysql_query($query);
echo "{success: true}";
} else {
echo "{success: false, errors: { reason: 'change password failur...' }}";
}
?>

Some other file, you can read here: Login Extjs-Confirm Password

Download Source code

Extjs Form: Change Password is posted on February 27th, 2009 by faisal. This post is filed under: Tutorial Extjs, Tutorial HTML, Tutorial PHP, Login, Password, Password Protection, Security .

Incoming search terms for the article:

ext password formext js formextjs passwordpassword in extjsform change passwordextjs update formextjs submit response php header locationwait loaD Form extjsextjs submit form responseextjs save php sessionextjs themesextjs file uploadextjs themeextjs uploadextjs upload fileextjs login formextjs grid checkboxextjs grid pagingextjs loginextjs tutorialext js login formlogin page using extjsfile upload extjsjson reader extjsextjs themeextjs uploadadd image after textfield in extjsSimpleListingEditorGrid getSelections(); is not a functionSimpleListingEditorGrid getSelections(); is not a functionextjs buttonCfg