PDA

View Full Version : using Ext.Ajax.request



anitacynax
15 Jun 2012, 5:58 AM
Hi Everyone,
I am new to Ext JS and programming in general. I have a grid panel with a list of users. I have a delete icon which needs to be linked to a method that deletes a user. I need to do this by using Ext.Ajax.request but don't know how to go about it as I do not understand params and the concept in general. What is the best way to go about it? I looked at the documentation on this and it isn't sufficient for me to solve the problem. Thanks for your help.

scottmartin
15 Jun 2012, 7:03 AM
Are you using an actionColumn for the icon on the grid?, or a button?

As for the ajax call, you can use something like:



Ext.Msg.confirm('Delete User?', 'Are you sure you want to remove selected user?',
function(btn) {
if (btn === 'yes') {
var users = [];
for (var i = 0, rec; rec = selRows[i]; i++){
users.push({ id: selRows[i].data.id_user });
}
// ajax call to delete all id instead of multiple calls to store.remove
Ext.Ajax.request({
method: 'POST',
url: 'index.php/users/delete_user/',
params : {
ids: Ext.encode(users) // list of users; or just a single id
},
success: function() {
// observable catches errors
},
failure: function() {
alert('AJAX FAILURE: Unable to delete selected users');
}
});

}
}
);


The above code uses a multi-select option, but you can just send a single id instead of the array of id's and it will do the same.

Regards,
Scott.

c5m7b4
15 Jun 2012, 1:59 PM
You will learn to fall in love with Ajax requests. Im pretty new also but I use them all the time now.


Ext.Ajax.request({
waitMsg:'Please Wait while we process your request',
url:'data/create_RunSpider.php',
params:{
id:storeid
},
success:function(response){
var result = response.responseText;
var responseArray = response.responseText.split(",");
var message = responseArray[1];
var codeArray = message.split(":");
var code = codeArray[1].replace('"','').substring(0,1);
switch(code)
{
case "0":
console.log('Failed to Run Spider');
break;
case "1":
Ext.Msg.alert('Success','The Spider has been notified to run');
break;
case "4":
Ext.Msg.alert('Alert','You do not have permission to Clear the Cue');
break;
}
}
});


and of cours you could also use the


failure:function(response){

}

right after the success as well. I have formatted my php return to always return success, but if it actually failed, i will send back the error codes and other stuff in the json

anitacynax
16 Jun 2012, 4:52 AM
Hi Scott
Thanks for your reply. I am using an actionColumn for the icon on the grid. Also instead of success and failure I need to use a try/catch block.

scottmartin
16 Jun 2012, 5:49 AM
I would suggest placing an exception listener on your proxy instead:



listeners : {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}


You should be able to catch what is required in your callback

success:
// success/fail response from server
failure:
// ajax fail

Scott.

anitacynax
18 Jun 2012, 12:58 AM
thanks for the reply, c5m7b4. i think it will take me some time and practice to understand ajax requests in ext js.

anitacynax
20 Jul 2012, 6:43 AM
Thanks everyone for your input. I found the perfect answer here:
http://stackoverflow.com/questions/11289915/rendertext-jsonconvert

My DeleteUser function code works and is as follows:


function DeleteUser(id) {
Ext.Ajax.request({
url: '/user/delete.castle',
params: {id: id},
success: function (result, request) {
var res = Ext.decode(result.responseText);
if (res.success){
Ext.MessageBox.alert('Success', res.message);
userstore.load();
} else {
Ext.MessageBox.alert('Error', "Unable to delete user!");
}
},
failure: function(result, request) {
alert(result.responseText);
}
});
}




The url refers to a method called Delete which has the following code:


public void Delete(int id)
{
CancelView();
CancelLayout();
User user = User.FindUser(id);
try
{
user.Delete();
}
catch (Exception exception)
{
return;
}

var obj = new { success = true, message = "User deleted successfully!" };
RenderText(JsonConvert.SerializeObject(obj));
}



Hope this post helps!