ExtJS jsonp access cross domain cgi file but respond syntaxError - javascript

I define a store in my extjs5 MVC project. I want to access cross domain cgi file so set proxy type: 'jsonp'.
After I load the store the Chrome show me "Uncaught SyntaxError: Unexpected token :"
Here is my store:
Ext.define('Myproject.store.MyStore', {
extend: 'Ext.data.Store',
model: 'Myproject.model.MyStore',
proxy: {
type: 'jsonp',
url: 'http://mylink:8000/setting.cgi',
extraParams: {
act: 'get_lib_list'
},
reader: {
type: 'json'
}
}
});
Response content:
{ "success": false, "error_code": 5006, "error_msg": "No such file or directory (-2)" }
How do I fix this problem?
Thanks

Related

Cannot consume web service with JQuery (console issues cors but xml is returned) [duplicate]

This question already has answers here:
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
(13 answers)
Closed 5 years ago.
I am trying to consume a web service with JQuery and I am getting the weird result of the browser showing cors error on the console while in the response tab I can see the returned XML.
See my console
See my response
The web service that I am trying to access calculate the freight of products.
I don't know how web services work, It's strange that it is blocked somehow, as the purpose of web services is to provide access to applications.
Here is the code I am trying to execute:
<script>
$().ready(function () {
var sendjson = {
"nCdEmpresa": "",
"sDsSenha": "",
"nCdServico": "41106",
"sCepOrigem": "37540000",
"sCepDestino": "37540000",
"nVlPeso": "1",
"nCdFormato": "1",
"nVlComprimento": "20",
"nVlAltura": "5",
"nVlLargura": "15",
"nVlDiametro": "0",
"sCdMaoPropria": "s",
"nVlValorDeclarado": "200",
"sCdAvisoRecebimento": "s"
}
$.ajax({
type: "GET",
cors: true,
url: "http://ws.correios.com.br/calculador/CalcPrecoPrazo.asmx/CalcPrecoPrazo",
data: sendjson,
dataType: "application/xml",
success: function (data) {
console.log(data);
},
error: function (data, err)
{
alert(err);
}
});
});
</script>
If someone can give me directions how to consume this web services I will be very glad. The answer can be in C# too, using HttpClient or whatever.
you need to replace your ajax call parameters
cors : true to crossDomain: true,
dataType: 'application/xml' to contentType : 'application/xml'
Ajax Call :
$.ajax({
type: "GET",
crossDomain: true,
url: "http://ws.correios.com.br/calculador/CalcPrecoPrazo.asmx/CalcPrecoPrazo",
data: sendjson,
contentType : 'application/xml',
success: function (data) {
console.log(data);
},
error: function (data, err)
{
alert(err);
}
});

How do I get ExtJS 5 AjaxProxy to save?

I'm upgrading an app to ExtJS 5, and I can't seem to get a grid using RowEditing to POST the edited record back to my server.
Ext.define("MyRecordDef", { extend: "Ext.data.Model" });
var MyEditor = Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 });
var MyStore = new Ext.data.Store({
model: "MyRecordDef",
autoSync: true,
proxy: {
type: "ajax",
url: "ajaxurl.aspx",
batchActions: false,
extraParams: { Command: 'Save' },
reader: { type: "json", rootProperty: "rows" },
writer: { type: "json", encode: true, writeAllFields: true }
}
});
var MyGrid = new Ext.grid.GridPanel({
store: MyStore,
plugins: [ MyEditor ],
columns: [
{
id: "fieldtoedit",
dataIndex: "fieldtoedit",
editor: new Ext.form.NumberField()
}
]
});
The row editor comes up, I'm able to change the value and click the Update button, but then nothing happens. No request is made, no errors logged in the console.
I added the following:
MyGrid.on('edit', function (e) {
alert('You are Editing ' + e.context.record.id);
MyStore.sync(); // attempt to force a sync
});
I get the alert with the correct record number, but still no AJAX request. It's like ExtJS is completely ignoring the writer.
I don't have different endpoints for each CRUD operation, so I'm not using the api config option, it should be using the url.
First of all you must define rootProperty on writer when you use encode: true.
Then after adding fields to MyRecordDef requests are sended.
Working sample: http://jsfiddle.net/jjVwR/3/ (saving don't work, but you can see on console that request is send)

Error in parseNamespace method using Extjs Proxy with Store

I am trying to link my grid with a store, which is using a proxy to connect to some outside source. This is how I have set it up :
Ext.define('js.dmwf.PackageStore', {
extend: 'Ext.data.JsonStore',
model: 'js.model.Package',
remoteFiler : false,
remoteSort: false,
autoLoad: true,
proxy: {
type: 'json',
url : 'mock/GetPackageListBB.json',
reader: {
type: 'json'
},
} });
However I am getting an error. Which is happening in the parseNamespace function in ext-all-debug.
Uncaught TypeError: Cannot read property 'substring' of undefined
ext-all-debug.js:5043
Ext.ClassManager.parseNamespace ext-all-debug.js:5043
I have a feeling that I am missing an import or two. However i think i have everything :
Ext.require([
'Ext.data.*',
'Ext.data.proxy.*',
'Ext.data.reader.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.form.SearchField',
'Ext.util.*',
'Ext.state.*'
// 'Ext.ux.grid.Search'
]);
I have a fiddle too :
https://fiddle.sencha.com/#fiddle/6jq
Proxy type needs to be 'ajax'.
proxy: {
type: 'ajax',
...
}

Extjs4 MVC save item to server

I am working with Extjs4.1 MVC. What I am trying to do is save some data to the server but I do not know the proper format or how I should go about submitting the data to the server.
Here is what I am thinking but I do not believe the Ajax call should be in the controller, it should be in the model or in the store file?
method in my controller:
submit: function(value) {
data = {"id": 100, "tdt": "rTk", "val": "445"} // test data
Ext.Ajax.request({
url: 'http://test.myloc.com/providerSvc/dbproxy.php',
params: {
'do':'insert',
'object': 'stk',
'values': data
},
success: function(response){
alert('response.responseText);
}
})
}
My store:
Ext.define('STK.store.Stack', {
extend: 'Ext.data.Store',
model: 'STK.model.Stack',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'http://test.myLoc.com/providerSvc/dbproxy.php?do=get&object=stack'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json'
}
}
});
my model:
Ext.define('STK.model.Stack', {
extend: 'Ext.data.Model',
fields: ['id', 'tdt', 'val']
});
store.sync() works only when the endpoints for GET and POST are same.
What you can do is, for GET,
set the extraParams by concatenating to the URL or by creating an object like
extraParams[urlKeys] = paramObject[urlKeys];
store.getProxy().setExtraParams(extraParams);
then,
Store.getProxy().setUrl(StoreUrlForGET);
Store.load({
callback : function(rec, operation, success) {
if (success) {}
else {}
});
and for POST write an AJAX request as,
Ext.Ajax.request({
url : StoreURLForPOST,
method : 'POST',
jsonData : Ext.JSON.encode(YourPostData),
success : function(response, request) {},
failure : function(response, request) {}
});
for this AJAX request you can,
Ext.Ajax.setDefaultHeaders({
"TokenId" : TokenValue
});
All of this code goes into your controller.
I think the store is the proper place to make the ajax call.
You can "save" one record by adding it to the store, and then calling the "sync()" function.
Something like this (beware: code not tested):
var store = Ext.create("STK.store.Stack");
var record = Ext.create("STK.model.Stack");
record.set(xvalues);
record.isDirty = true;
record.setDirty(true); // I don't know if this line is required
store.add(record);
store.sync({
success: function(batch, options){
alert("OK!")
},
failure: function(batch, options){
alert("failure!")
}
});

Sencha Touch: ScriptTagProxy url for create/update functionality

I've a ScriptTagProxy and I'm able to receive the data, but now I wanted to update a record. I've specified an url but only one url. Do I have to handle all the actions (read, update, create, delete) with this url?
If yes: how does the action is applied to the url?
If not: how I can specify more urls?
Here is the code I have so far:
app.stores.entries = new Ext.data.Store({
model: "app.models.Entry",
storeId: 'app.stores.entries',
proxy: {
type: 'scripttag',
url: 'http://myurl.de/getEntries.php',
extraParams: {
username: Ext.util.JSON.decode(window.localStorage.getItem('settings')).username,
password: Ext.util.JSON.decode(window.localStorage.getItem('settings')).password
},
reader: {
type: 'json'
},
writer: {
type: 'json'
}
}
});
I've read in the docs that you can pass an config object to the save function of a model to configurate the proxy.
So I tried following:
entry.save({
url: 'http://mysite.com/updateEntry.php',
extraParams: {
username: Ext.util.JSON.decode(window.localStorage.getItem('settings')).username,
password: Ext.util.JSON.decode(window.localStorage.getItem('settings')).password,
entry: entry
},}
As you see there is a url specified.
But I still get the error:
Uncaught Error: You are using a ServerProxy but have not supplied it with a url.
);
Same behaviour when using AjaxProxy or RestProxy for example :(
Hering,
With your first block of code you ask:
Question 1) "Do I have to handle all the actions (read, update, create, delete) with this url?"
The answer is yes.
Question 2) "If yes: how does the action is applied to the url?"
According to the Sencha source code you need to define the actionMethods like so:
myApp.stores.Things = new Ext.data.Store({
model: "Things", proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
url: 'jsontest.json',
reader: {
type: 'json',
root: 'things'
}
},
autoLoad: true
});
If you delete, create or edit a record you must call:
store.sync();
There is also a "autoSave" property but it only syncs on edits, not removes.
This will send over the things that have changed or been deleted as part of the request payload, it is your responsibility to parse the json and handle it.
Hering,
I was reading the documentation here, I found this example in the Model class:
Ext.regModel('User', {
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
url : '/users'
}
});
But above you don't show your Model for app.models.Entry, have you tried that?

Categories

Resources