SOAP web services client with ExtJS, SOAP and JavaScript - extjs

I implemented SOAP web services with WildFly. Invocation of endpoint interface is successful. The below url returns the correct result.
http://localhost:8080/SOAPJaxbWeb/?operation=ICallMemberPort
But the ExtJS soap client does not work at all. These are my ExtJS soap client codes.
Ext.define('Member', {
extend: 'Ext.data.Model',
fields : [{
name : 'id',
type : 'string'
}, {
name : 'passwd',
type : 'string'
}, {
name : 'age',
type : 'int'
}, {
name : 'name',
type : 'string'
}]
});
Ext.onReady(function () {
var family = Ext.create('Ext.data.Store' , {
model : 'Member',
autoLoad : true,
proxy: {
type: 'soap',
url: 'SOAPJaxbWeb/',
api: {
read: 'ICallMemberPort'
},
soapAction: {
read: 'http://localhost:8080/SOAPJaxbWeb/?operation=ICallMemberPort'
},
operationParam: 'ICallMemberPort',
targetNamespace: 'http://www.aaa.com/',
reader: {
type: 'soap',
record: 'ns|return',
namespace: 'ns'
},
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
},
listeners: {
load: function(family, operation, success) {
if(success) {
alert('response : ' + family.model.length)
} else {
alert('it failed')
}
}
}
});
var onButtonClick = function() {
Ext.Msg.alert(Ext.getCmp('myid').getValue())
family.load()
};
I am afraid above ExtJS soap configuration is wrong. When executed, nothing shows.

proxy: soap
Note: This functionality is only available with the purchase of Sencha Complete. For more information about using this class, please visit our Sencha Complete product page.
https://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.data.soap.Proxy

Related

KendoUI Grid for AngularJS binding error from asp.net mvc controller. Success is not a function error

I attempt to do simple task using KendoUI grid for AngularJS in asp.new mvc application. It is binding data to grid from mvc controller.
asp.net mvc controller method:
public ActionResult GetCdcReport()
{
var testJson =
#"{ProductID:'1',ProductName:'Chai',UnitPrice:'18',UnitsInStock:'39',Discontinued:'false'}";
var json = JObject.Parse(testJson);
return new JSONNetResult(json);
}
angularjs service function:
function getImportResultReport() {
return httpPost('getCdcReport');
}
code from component for data binding:
$scope.mainGridOptions = {
columns: [
{ field: "ProductID", title: "ID" },
{ field: "ProductName", title: "Product Name" },
{ command: [{ template: "<button class='k-button' ng-click='showDetails(dataItem)'>Show details</button>" }] },
],
pageable: true,
dataSource: {
pageSize: 5,
transport: {
read: function (e) {
dataservice.getImportResultReport().
success(function (data) {
e.success(data);
}).
error(function (data, status) {
alert('something went wrong');
console.log(status);
});
}
}
}
};
I see that server method is called but in console i get following client error:
dataservice.getImportResultReport(...).success is not a function
In similar question i read that:
The $http legacy promise methods success and error have been
deprecated. Use the standard then method instead.
i replace binding code on:
$scope.mainGridOptions = {
columns: [
{ field: "ProductID", title: "ID" },
{ field: "ProductName", title: "Product Name" },
{ command: [{ template: "<button class='k-button' ng-click='showDetails(dataItem)'>Show details</button>" }] },
],
pageable: true,
dataSource: {
pageSize: 5,
transport: {
read: function (e) {
dataservice.getImportResultReport().
then(function (data) {
return data;
});
}
}
}
};
After that I don't receive this error but grid stay without data.
Also i attempted do it like:
vm.mainGridOptions = {
columns: [
{ field: "ProductID", title: "ID" },
{ field: "ProductName", title: "Product Name" },
{ command: [{ template: "<button class='k-button' ng-click='showDetails(dataItem)'>Show details</button>" }] },
],
pageable: true
};
$scope.mainGridOptions.DataSource = dataservice.getImportResultReport();
it is also not work.
What i'm doing wrong?
It is example from telerik site. If in binding logic replase dataservice.getImportResultReport() on $http.jsonp('URL FROM EXAMPLE') then it is work.

ExtJS 4.2 - Internal Server Error 500 When Loading Store

I keep on getting an internal server 500 error every time I attempt to load my store. I am currently trying to connect to our API endpoint that contains the data that I need. This is the error I'm getting every time (FYI, checking the 'Accept' Header, it seems it's empty. I am not sure how I can have an application/json there to correctly connect to it):
My Store is setup like this:
Ext.define('EcommBackoffice.store.TierCapacity', {
extend: 'Ext.data.Store',
model: 'EcommBackoffice.model.TierCapacityModel',
storeId: 'tier-capacity-id',
autoLoad: true,
sorters: [{
property: 'name',
direction: 'ASC'
}],
proxy: {
type: 'rest',
url: EcommBackoffice.Global.getAPIEndPoints().tier_capacity + '?siteCode=bgp88',
reader: {
type: 'json',
root: ''
},
listeners: {
exception: function(proxy, response, op) {
if (response.status === 403 || response.status === 401) return; /*skip this exception handler and check App exception handler*/
Ext.Msg.alert('ERROR', response.responseText + ' ' + response.statusText);
}
}
}
});
And my model like this:
Ext.define('EcommBackoffice.model.TierCapacityModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id'
}, {
name: 'paymentOption',
type: Ext.data.SortTypes.asUCString
}, {
name: 'tier',
type: Ext.data.SortTypes.asUCString
}, {
name: 'media',
type: Ext.data.SortTypes.asUCString
}, {
name: 'channels',
type: Ext.data.SortTypes.asUCString
}]
});
The API contains something like this:
[{
"name": "DEBIT",
"tiers": [{
"name": "Default",
"media": [{
"name": "OFFICE",
"channels": [{
"name": "CHANNEL-001",
"currentVolume": 0,
"maxVolume": 0,
"yesterdayVolume": 0
}]
}]
}]
}]
Moreover, I am a bit unfamiliar with setting up the models and stores. I am assuming that is where I'm missing something. Am I structuring the model correctly based on the API response? I tried reading the docs, but I still can't wrap my head around it.
Error Code 500 tells :
The server encountered an unexpected condition which prevented it from fulfilling the request.
As I can see that while processing code at your Java end , you are getting NullPointerException .
So when an unexpected exception occurs , Http 500 error code is thrown which is shown on your browser. This error code has nothing to be done from client side.
The error 500 is not an ExtJS issue. It's a backend issue. You should check what backend technologies you use and add these to the tags to get any help.
checking the 'Accept' Header, it seems it's empty. I am not sure how I can have an application/json there to correctly connect to it)
proxy: {
headers: {
Accept: 'application/json'
},

How to create Grid in sencha touch 2.3.0 populate data from a REST webservice

I need to display report in Grid / Table in Sencha Touch 2.3.0. Is there any build in function to do so.
The store needs to populate data from a REST webservice call.
For loading data you can use Ext.data.Store configured with REST proxy Ext.data.proxy.Rest
For displaying data from store you can use Ext.grid.Grid of Ext.dataview.DataView
I do this all the time with something like this:
(Though I haven't worked with the Grid, I'm quite sure the same principles apply...)
Ext.define('App.controller.GridController', {
extend : 'Ext.app.Controller',
config: {
refs: {
getApiButton: 'button[action=getApiData]'
},
control: {
'getApiButton' : {
tap : 'onButtonTap'
}
}
},
onButtonTap : function(field, value) {
var that = this;
Ext.Ajax.request({
url : someWebServiceUrl,
method: 'GET',
success: function (result, request) {
var res = Ext.decode(result.responseText);
if (res.success === true && res.data != false) {
var recipient = {
name: res.data[0].displayname,
picId: res.data[0].pictureid,
gender: res.data[0].gender
};
var mod = Ext.define('App.model.GradingPopModel', {
extend: 'Ext.data.Model',
config: {
fields: [
'name',
'picId',
'gender'
]
}
});
/* == this is probably where you want to make your changes to apply the model to the grid template
the sencha website has this:
data: {'items': [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]}
*/
var store = Ext.create('Ext.data.Store', {
model: mod,
storeId:'recipStore'
});
store.add(recipient);
store.setData(recipient);
store.load();
var gridView = Ext.ComponentQuery.query('#gridViewId')[0];
gridView.setStore(store);
}
},
failure: function (result, request) {
console.log('api call was a failure');
},
scope: this
});
}
});
Now of course your data won't have "displayname, gender" etc.. but you should get the point.
I also found a working example here (I find it very sad that Sencha allows broken demos on their own website): http://demo.rasc.ch/eds/touch23/grid/grid/index.html

Ext.data.LocalStorage not working on Offline Mode

Im now studying Sencha Touch 2 and doing some Research on Ext.data.LocalStorage that can be use in Offline Mode.
I tried to follow this turorial
Sencha Touch 2 Local Storage
and just updated the code from Github - RobK/SenchaTouch2-LocalStorageExample or riyaadmiller/LocalStorage and modified Store url using my own WCF Rest
but i cant get LocalStorage working on offline mode.I have no issue on running the app Online. I also tried to debug it on Chrome developer tool but LocalStorage always get 0 data. I used Chrome/Safari Browser and also build the apps as Android using Phonegap build and still not working.
Did I miss something?
Does anyone can provide the details to deal with this Issue.
Below is my code:
Store:
Ext.define('Local.store.News', {
extend:'Ext.data.Store',
config:{
model: 'Local.model.Online',
proxy:
{
type: 'ajax',
extraParams: { //set your parameters here
LookupType: "Phone",
LookupName: ""
},
url: 'MY WCF REST URL',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
reader:
{
type: 'json'
, totalProperty: "total"
},
writer: { //Use to pass your parameters to WCF
encodeRequest: true,
type: 'json'
}
},
autoLoad: true
}
});
Offline Model:
Ext.define('Local.model.Offline', {
extend: 'Ext.data.Model',
config: {
idProperty: "ID", //erm, primary key
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "LookupName", type: "string" },
{ name: "LookupDescription", type: "string" }
],
identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
proxy: {
type: 'localstorage',
id : 'news'
}
}
});
Online Model:
Ext.define('Local.model.Online', {
extend: 'Ext.data.Model',
config: {
idProperty: "ID", //erm, primary key
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "Name", type: "string" },
{ name: "Description", type: "string" }
]
}
});
Controller:
Ext.define('Local.controller.Core', {
extend : 'Ext.app.Controller',
config : {
refs : {
newsList : '#newsList'
}
},
/**
* Sencha Touch always calls this function as part of the bootstrap process
*/
init : function () {
var onlineStore = Ext.getStore('News'),
localStore = Ext.create('Ext.data.Store', { storeid: "LocalNews",
model: "Local.model.Offline"
}),
me = this;
localStore.load();
/*
* When app is online, store all the records to HTML5 local storage.
* This will be used as a fallback if app is offline more
*/
onlineStore.on('refresh', function (store, records) {
// Get rid of old records, so store can be repopulated with latest details
localStore.getProxy().clear();
store.each(function(record) {
var rec = {
name : record.data.name + ' (from localStorage)' // in a real app you would not update a real field like this!
};
localStore.add(rec);
localStore.sync();
});
});
/*
* If app is offline a Proxy exception will be thrown. If that happens then use
* the fallback / local stoage store instead
*/
onlineStore.getProxy().on('exception', function () {
me.getNewsList().setStore(localStore); //rebind the view to the local store
localStore.load(); // This causes the "loading" mask to disappear
Ext.Msg.alert('Notice', 'You are in offline mode', Ext.emptyFn); //alert the user that they are in offline mode
});
}
});
View:
Ext.define('Local.view.Main', {
extend : 'Ext.List',
config : {
id : 'newsList',
store : 'News',
disableSelection : false,
itemTpl : Ext.create('Ext.XTemplate',
'{Name}-{Description}'
),
items : {
docked : 'top',
xtype : 'titlebar',
title : 'Local Storage List'
}
}
});
Thanks and Regards
1) First of all when you creating record and adding into store, the record fields should match the model fields of that store.
Here you creating record with field name, but Local.model.Offline didn't name field
var rec = {
name : record.data.name + ' (from localStorage)'
};
This is what you need to do within refresh
localStore.getProxy().clear();
// Also remove all existing records from store before adding
localStore.removeAll();
store.each(function(record) {
console.log(record);
var rec = {
ID : record.data.ID,
LookupName : record.data.Name + ' (from localStorage)',
LookupDescription : record.data.Description
};
localStore.add(rec);
});
// Don't sync every time you add record, sync when you finished adding records
localStore.sync();
2) If specify idProperty in model which is using localStorage, then record will not be added into localStorage.
Model
Ext.define('Local.model.Offline', {
extend: 'Ext.data.Model',
config: {
// idProperty removed
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "LookupName", type: "string" },
{ name: "LookupDescription", type: "string" }
],
identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
proxy: {
type: 'localstorage',
id : 'news'
}
}
});

Sencha Touch 2 Load store crashs

Hello i have the following problem:
After i generate the AP and install it on my phone the requisition store.load breaks in this specific store called CHAMADOS, but when i close the app and restart, it does not crash and bring me all the informations in the list...
It seems that the .load requires bring me the informations in the first time.
When i close and open it again the cache informations required before is add to the list, but the load required on the restart APP does not work.
It crashs and dont add the items to the LIST, but the store has data because on restart it appears, i have others store in this app and they work fine!
On brownser its fine, the problem is in the APK
Here is the view
{
height: '60%',
ui:'round',
style:'padding:18px 0; background:#FFF;',
xtype: 'dataview',
id: 'feedListagemChamados',
store: 'Chamados',
itemTpl: '<span>{nom_chamado}</span> '
}
Here is the store
Ext.define('WE3Chamados.store.Chamados', {
extend: 'Ext.data.Store',
config: {
model: 'WE3Chamados.model.Chamado',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://LINK?cod_usuario='+localStorage.getItem("usuarioId"),
callbackKey: 'callback',
reader: {
type: 'json',
rootProperty : 'chamados',
successProperty: 'success'
}
}
}});
Here is where i call the store to load (CONTROLLER)
showListaChamados: function (direcao) {
this.cleanApp();
store = Ext.getStore('Chamados').load();
store.load({
scope : this,
callback : function(records, operation, success) {
***IT BREAKS HERE ON RETURN***
Ext.Msg.alert('Opps', records[0].data.nom_usuario, this);
Ext.Viewport.animateActiveItem(this.getChamadoView(), this.getSlideTransition(direcao));
}
});
Ext.Msg.alert('Opps', store.data, this);
}
Here is the model
Ext.define('WE3Chamados.model.Chamado', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'cod_chamado'
},
{
name: 'nom_chamado'
},
{
name: 'des_chamado'
},
{
name: 'cod_equipe'
},
{
name: 'dat_cadastro'
},
{
name: 'dat_previsao'
},
{
name: 'dat_necessaria'
},
{
name: 'num_prioridade'
},
{
name: 'cod_projeto'
},
{
name: 'nom_usuario'
},
{
name: 'cod_status'
},
{
name: 'nom_projeto'
},
{
name: 'des_equipe'
},
{
name: 'nom_status'
},
{
name: 'nom_cliente'
},
{
name: 'cod_usuario'
},
{
name: 'cod_usuario_responsavel'
}
]
}});
I found the problem, it was in the localStorage.getItem("usuarioId") its not sendind it by the get, because it is after login, i think there is a bug in the js or its so fast that the comand to send the link cant get the localStorage.getItem.
Im trying using php SESSION now.

Resources