It possible to customize the Error Alert which popups while we set the connectOnStartup=true. I don't want my users to click on "Details" from that alert and view the details of the error message. I want to customize that alert with my custom message and action.
Two options:
In addition to using connectOnStartup property in initOptions.js, also use the onConnectionFailure property:
var wlInitOptions = {
connectOnStartup : true,
// # The callback function to invoke in case application fails to connect to Worklight Server
onConnectionFailure: function () {
WL.SimpleDialog.show(
"foo",
"bar",
[{text: "button",
handler : function() {alert("button pressed");}
}]
);
// optionally add more logic here
},
...
...
Do not use the connectOnStartup property. Instead, use WL.Client.connect to connect to the server when appropriate. For example, in wlCommonInit()
function wlCommonInit() {
WL.Client.connect({ onSuccess: success, onFailure: failure});
}
function success() {
// ...
}
function failure() {
WL.SimpleDialog.show(
"foo",
"bar",
[{text: "button",
handler : function() {alert("button pressed");}
}]
);
// optionally add more logic here
}
Related
We have Mobile hybrid app running on MFP 7.1.0.00.20170627-0807. Our wlInitOptions is as below:
var wlInitOptions = {
autoHideSplash : false,
showIOS7StatusBar : false,
onSuccess : function (response) {
console.log(" wlInitOptions onSuccess :" + JSON.stringify(response));
},
onFailure : function (error) {
alert("System Error: Failed to connect !!");
},
onConnectionFailure: function (error) {
WL.SimpleDialog.show(
"System Error: Server connection error",
error,
[{text: "Close", handler: null}]
);
},
onUserInstanceAccessViolation : function (error) {
WL.SimpleDialog.show(
"System Error: User Access not available",
error,
[{text: "Close", handler: null}]
);
},
timeout: 10000,
onRequestTimeout : function (error) {
WL.SimpleDialog.show(
"System Error: Request Timeout",
error,
[{text: "Close", handler: null}]
);
},
onErrorRemoteDisableDenial : function (message, downloadLink) {
WL.SimpleDialog.show(
appStoreUpdateTitle,
message,
[{text: notNowButton, handler: function() {WL.App.close();}},
{text: downloadNewVersionBtn, handler: function() {WL.App.openURL(downloadLink, "_blank");}}]
);
},
};
if (window.addEventListener) {
window.addEventListener('load', function() {
WL.Client.init(wlInitOptions);
console.log(" wlInitOptions 1 :" + JSON.stringify(WL.Client.init(wlInitOptions)));
}, false);
} else if (window.attachEvent) {
window.attachEvent('onload', function() {
WL.Client.init(wlInitOptions);
console.log(" wlInitOptions 2 :" + JSON.stringify(WL.Client.init(wlInitOptions)));
});
}
};
I'm trying to identify what is the response we get from success init. However, the log is always comes as undefined even though our app is working as expected.
How would I know what is the response content and why it is undefined.
The reason behind this is to track the failure of the init call so we can capture the log and the exact response that caused the failure.
Logs:
2017-07-26 12:56:04.281 ManulifeBankMobile[19779:517705] wlInitOptions onSuccess :undefined
2017-07-26 12:56:04.281 ManulifeBankMobile[19779:517705] wlInitOptions 1 :undefined
2017-07-26 12:56:04.281 ManulifeBankMobile[19779:517705] wlInitOptions 2 :undefined
The WL.Client.init() function is an asynchronous void function - it doesn't return anything. You can use the onSuccess and onFailure callbacks to react to overall success or failure of the WL.Client.init() call, respectively. These callbacks, however, are not passed a reference to the actual response. If you want to respond to specific failure scenarios, you can specify a number of additional failure callback functions in your options object. These callbacks will be invoked when the associated error scenario occurs:
onUnsupportedVersion
onRequestTimeout
onUnsupportedBrowser
onDisabledCookies
onUserInstanceAccessViolation
onErrorRemoteDisableDenial
onErrorAppVersionAccessDenial
Note that the general onFailure callback will be invoked in every failure case.
See the WL.Client.init() documentation for more info
SDK 2.0 PreferenceManager, how do I create and update a preference using PreferenceManager? Just using update method does not seem to store the value, and create is "not a function" error. TypeError: Rally.data.PreferenceManager.create is not a function.
//load app preferences
Rally.data.PreferenceManager.load({
appID: this.myAppId,
filterByUser: true,
success: function(prefs) {
//process prefs
if(prefs.releases) {
this.releaseNames = prefs.releases;
} else {
//first time, nothing to load so create the app preferences
Rally.data.PreferenceManager.create({
appID: this.myAppId,
filterByUser: true,
settings: {
releases: ""
},
success: function(updatedRecords, notUpdatedRecords) {
//yay!
debugger;
}
});
}
}
});
//things have changed, save new app preferences
Rally.data.PreferenceManager.update({
appID: this.myAppId,
filterByUser: true,
settings: {
releases: this.releaseNames
},
success: function(updatedRecords, notUpdatedRecords) {
//yay!
debugger;
}
});
I found that the create method is not required, the update method is all that is needed.
I'm trying to upload a file using Ext JS forms and in case of success or failure, show appropriate messages. But I'm not able to get the desired result. I'm not able to make success or failure callbacks work in form.submit action.
What I've done till now is:
Creating a form with this script:
new Ext.FormPanel({
fileUpload: true,
frame: true,
url: '/profiler/certificate/update',
success: function() {
console.log(arguments);
},
failure: function() {
console.log(arguments);
}
}).getForm().submit()
/*
The response Content-Type is text/html (with charcode=utf8);
The response JSON is: { "success": true }
*/
Setting the response Content-Type to text/html based on this answer.
Sending an appropriate JSON result back, based on Ext JS docs. The response captured via Fiddler is:
{"success":false}
or
{"success":true}
I even set the response Content-Type to application/json. But still no success.
I've read links like this and this, but none of them helped. Please note that I also tried another script which creates a form, with an upload field in it, and a save button, and I submitted the form in the handler of the save button. But still no callback is fired.
Here's a working example - Javascript code:
Ext.onReady(function () {
Ext.define('ImagePanel', {
extend: 'Ext.form.Panel',
fileUpload: true,
title: 'Upload Panel',
width: 300,
height: 100,
onUpload: function () {
this.getForm().submit({
url: 'upload.php',
scope: this,
success: function (formPanel, action) {
var data = Ext.decode(action.response.responseText);
alert("Success: " + data.msg);
},
failure: function (formPanel, action) {
var data = Ext.decode(action.response.responseText);
alert("Failure: " + data.msg);
}
});
},
initComponent: function () {
var config = {
items: [
{
xtype: 'fileuploadfield',
buttonText: 'Upload',
name: 'uploadedFile',
listeners: {
'change': {
scope: this,
fn: function (field, e) {
this.onUpload();
}
}
}
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
}
});
var panel = Ext.create('ImagePanel', {
renderTo: Ext.getBody()
});
});
And PHP code:
<?php
if (isset($_FILES)) {
$temp_file_name = $_FILES['uploadedFile']['tmp_name'];
$original_file_name = $_FILES['uploadedFile']['name'];
echo '{"success": true, "msg": "'.$original_file_name.'"}';
} else {
echo '{"success": false, "msg": "No Files"}';
}
I have been struggling with this for quite some time now as well. Here's my code:
Ext.getCmp('media-upload-form').getForm().doAction('submit', {
url: './services/recordmedia/upload',
method: 'post',
waitMsg: 'Please wait...',
params: {
entityId: this.entityId,
},
failure: function(form, action){
alert(_('Error uploading file'));
this.fireEvent('file-upload');
this.close();
},
success: function(form, action){
this.fireEvent('file-upload');
this.close();
},
scope: this
})
The response was always wrapped in <pre> tags by the browser, what caused the Extj lib not to call the callbacks. To fix this:
make sure your server returns the correct json: {"success":true}
make sure that the content-type is set to text/html
Actually, this is well covered by docs for Ext.form.Panel and Ext.form.Basic. The problem with your code not working is that there are no config options "success", "failure" for the form panel. You should put them in the config object passed to the submit action. So your code should look like:
new Ext.FormPanel({
fileUpload: true,
frame: true
}).getForm().submit({
url: '/profiler/certificate/update',
success: function() {
console.log(arguments);
},
failure: function() {
console.log(arguments);
}
});
Note the difference: In Ext 4, there is a form component (Ext.form.Panel) which is basically a view component concerned with how you form looks, and then there is the underlying form class (e.g. Ext.form.Basic) concerned with the functionality. Form submissions are handled by Ext.form.Basic (or whatever returned by your form.getForm()).
This is weird, I can use Phonegap's navigator object fine if I click a button on my page like so.
Controller
Ext.define('App.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
refs: {
homeButton: 'button[action=viewHome]',
},
control: {
homeButton: {
tap: 'showHome'
},
}
},
showHome: function(button, e, options) {
navigator.notification.vibrate(1000);
},}
But if I try to access the navigator object in the launch function I get 'undefined'.
Controller
Ext.define('App.controller.MainController', {
extend: 'Ext.app.Controller',
launch: function(){
navigator.notification.vibrate(1000);
},}
The same thing is happening in app.js's launch function. Anybody know why is that and how I can use Phonegap in the launch function?
It seems you are trying to access the phonegap 'navigator' API, before it is ready. You have to listen for the deviceready event and once its triggered, you can call navigator.
You can call it this way.
launch: function () {
if(Ext.browser.is.PhoneGap && !Ext.os.is.Desktop) {
document.addEventListener("deviceready", this.mainLaunch, false);
} else {
this.mainLaunch();
}
},
mainLaunch: function() {
navigator.notification.vibrate(1000);
}
The Ext.browser check is to make this work on chrome browser also, otherwise you will have to always test the app on Simulator, or device.
I have an ExtJS store with an ajax proxy and json reader:
Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
url: '...',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount',
messageProperty: 'message',
successProperty: 'success'
},
...
This is what I get from the server:
data: [...]
message: "I want to read this string after the store is loaded"
success: true
totalCount: x
Now I want to access the 'message' when the store is loaded - where do I get it? I looked a lot but I can't find a place to hook in? The only listener in the proxy is exception, that doesn't really help me.
use store load event:
Ext.create('Ext.data.Store', {
listeners: {
'load': function(store, records, successful, operation) {
alert(operation.resultSet.message);
}
},
proxy: {
// ...
UPDATE
It appears that documentation for load event is wrong. The correct list of arguments is (store, records, successful) (no operation argument). Therefore the solution above wouldn't work.
However there is reader's rawData property which can help:
Ext.create('Ext.data.Store', {
listeners: {
'load': function(store, records, successful) {
alert(store.getProxy().getReader().rawData.message);
}
},
proxy: {
// ...
My answer applies to ExtJs 4.1.x. I spent some time reading the code and it seems that one way to do this is to provide a callback in the store beforeload event instead of handling the load event. The callback is passed the operation object which will contain the original request parameters and in case of success it will contain the response object and the data (parsed) under the resultSet property.
In other case:
myStore.load({
callback : function(object, response, success) {
// on error response: success = false
if(!success) {
// i don't remember de correct path to get "message" or "responseText"
console.log(response.response.responseText);
} else {
...
}
});
Cya!
I get the message in the following way although I load manually and do not use events here:
var initData = Ext.create('My.data.SomeAjaxStore');
initData.load(function(records, operation, success) {
if (!success || operation.hasException()) {
// Here is your message from server
// In case of HTTP error you get:
// {
// status: 404,
// statusText: "Not Found"
// }
var error = operation.getError();
Ext.log({msg:[Ext.getClassName(me), ": Command failure: ", error].join(""), level:"error"});
}