Hi,
I need help to better simplify this process. In order to fully comprehend how everything fits together please refer to my previous post - My Web based system Basically, I want to send more commands to this procedure that I have written. Write now there is only one function I have implemented, detect, but I want to add more in the future ie.ResetDevice,BlockDevice,Encrypt etc. ie.
MyApp.Request = {
detect:function(request_id,callback){
...}
reset:function(request_id,callback){
...}
encrypt:function(request_id,callback){
...}
However, I find it somewhat repetitive to create a Ext.Ajax.request for each new function (var task = function() in this case)
Also on calling one of these functions, I need to copy/paste the same method to show progress bar and hide it on completion every time. This increases the lines of code significantly
Herewith my code:
1.Request.js
Ext.ns('MyApp')
MyApp.Request = {
detect:function(request_id,callback){
var task = function(){
Ext.Ajax.request({
url: 'requests.php',
params:{
action:'detect',
'request_id':request_id
},
timeout:30000, //30 seconds
success:function(response){//serverside response
var result = Ext.decode(response.responseText); //convert to js objects
if(result.success == true){//device was detected
cons.log('success, device was detected');
cons.log(result);
Ext.TaskMgr.stop(runTask);
callback(result);
}else{
if(result.done == true){
Ext.TaskMgr.stop(runTask);
Ext.MessageBox.hide();
Ext.Msg.show({
title:'Error',
msg:result.attrs.msg,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
Ext.MessageBox.getDialog().getEl().setStyle('z-index','80000');
}else{
if(runTask.taskRunCount >=10){
//retry limit exceeeded
cons.log('request timed out');
Ext.Msg.show({
title:'Error',
msg:"The request timed out on waiting for response from server",
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
Ext.MessageBox.getDialog().getEl().setStyle('z-index','80000');
}
}
}
},
failure:function(response){//server side response
var result = Ext.decode(response.responseText); //convert to js objects
cons.log('server error');
cons.log(result);
Ext.TaskMgr.stop(runTask);
//hide progress
Ext.MessageBox.hide();
//show error
alert('Server Failure');
}
})
}
var runTask = {
run: task,
interval:2000,
repeat:10
};
Ext.TaskMgr.start(runTask);
}
}
2.Caller.js
This is how the function is called in js
onDetectClick:function(){
var device_params = {
form:Ext.ux.FormHelper.getValues(this)//port,baud etc
};
MyApp.request(this.module,'detect',{
params: Ext.encode(device_params)
},MyApp.callback({
customBehavior:this.parseDeviceIdData.createDelegate(this)
})
);
},
parseDeviceIdData:function(result){ //the result from the inserted request record
_this = this;
cons.log('parsing data');
Ext.MessageBox.wait("Processing", 'Please wait...');
Ext.MessageBox.getDialog().getEl().setStyle('z-index','70000');
if(result.success == true){
console.log('request record exists');
MyApp.Request.detect(result.request_id,function(response){
var record = response.attrs;
_this.find('name','device_id')[0].setValue(record.device_id);
Ext.MessageBox.hide();
});
}else{
//record was never inserted in requests
Ext.MessageBox.hide();
Ext.Msg.show({
title:'Request Failed',
msg:"Error, The request was not found in the database",
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
Ext.MessageBox.getDialog().getEl().setStyle('z-index','80000');
}
}
Any suggestions are more than welcome! I can see the pattern in the logic but lack some expertise on how to better the code for frequent re-use.
Thanks