This is my model
Ext.define('ThemeApp.model.peopleModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id' },
{ name: 'subject' },
{ name: 'description'}
],
proxy: {
type: 'rest',
format: 'json',
limitParam:"",
filterParam: "",
startParam:'',
pageParam:'',
url:'http://localhost:3000/issues/1',
/*
api: {
read : 'http://localhost:3000/issues'
},*/
headers: {'Content-Type': "application/json" },
//url : 'http://api.soundcloud.com/tracks?q=allah%20dita%20rehman%20khan&client_id=0b19b8dc2526b43eae19f03b2eab6798&format=json&_status_code_map[302]=200',
reader: {
type: 'json',
rootProperty:'issues'
},
writer: {
type: 'json'
}
}});
This is my store:
Ext.define('ThemeApp.store.peopleStore', {
extend: 'Ext.data.Store',
model: 'ThemeApp.model.peopleModel',
storeId: 'peopleStore',
pageSize: 500,
autoLoad: true });
All I am trying to do is to fill this grid using Rest proxy, and to test GET and POST methods of rest proxy. I was able to ready soundcloud api using this application but when I tried to read Redmine issues (localhost:3000/issues.xml)
I am getting this error:
http://localhost:3000/issues.json just Look like http://www.redmine.org/issues.json only with lesser data. Also Localhost:300/issue.json do exsist !
Any Idea ?
You are trying to perform CORS requests against the Redmine API. Unfortunately, Redmine currently doesn't support CORS, so this is not possible without further infrastructure changes (which might compromise security if done incorrectly).
There are plugins adding CORS headers to Redmine reponses, but from what I have seen yet, they do not fully ensure a secure system yet.
Given these restrictions, your requests to Redmine will only be valid if your ExtJS app is served from the same host and port as Redmine so that it runs in the same origin and thus works without any explicit CORS support. You could enable this by using a proxy server (e.g. nginx) before both Redmine and the static files of your ExtJS app so ensure the same origin.
http://localhost:3000/issues.json
exists, but
http://localhost:3000/issues/1.json
does not exist.
In order to get a rest api to work, you need to use url rewriting.
If you have a flat .json file, you should not use a rest proxy but a json proxy, and you will not have this problem.
Related
I'm using ExtJs 5.1.1 and I've written a simple view with a grid, and selecting one row the corresponding model property are editable in some text fields.
When editing is completed the button 'save' call Model.save() method, which use the rest proxy configured to write the changes on the server.
The call made by the proxy are two, first is OPTIONS call to know which method are allowed, second call is a PUT.
My problem is PUT json contains only the changed attributes.
I would like that my application sends all the attributes in PUT, instead only the changed subset.
Is this a proxy configuration, or should I use another kind of proxy, like ajax?
Some code snippet:
Model:
Ext.define('myApp.model.CvModel', {
extend: 'Ext.data.Model',
alias: 'viewmodel.cv',
idProperty : 'code',
proxy: {
type: 'rest',
url: 'http://localhost:8080/CV/resource/rest/cvs/CodeSystem/Domain',
paramsAsJson: true,
reader: {
type: 'json',
rootProperty: 'Test_data'
}
},
fields: [{
...
Controller:
onSave: function () {
var selCv = this.getViewModel().get('selectedCv');
selCv.save();
....
You need to specify a writer config on your proxy with writeAllFields: true. By default it's false, and the default writer itself is just {type: 'json'}.
I have an OData service that returns the following json.
{
"#odata.context":"http://testing.test.com/DataService/Data","value":[
{"ID":1,"Description":"Test 1"}
,{"ID":2,"Description":"Test 2"}
,{"ID":3,"Description":"Test 3"}]
}
If both the odata service and the web page calling the odata service are on localhost then all works fine.
If the odata service is on a host like testing.test.com and the web page calling the odata service is on localhost then all does not work fine.
I can see in fiddler that the data is coming back to the client on localhost but the grid never displays the data.
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost/DataService/Data",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
schema: {
data: "value",
model: {
id: "ID"
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "ID", title: "ID", width: 70 }]
});
});
</script>
The odata is hosted through ASP.NET web api odata not wcf.
The web client is hosted through ASP.NET web application general html.
I read somewhere that I might have to set crossDomainScriptAccessEnabled="true" in the web.config but the seems to only be for WCF webHttpBinding. Yet I am using WEB API not WCF.
Finally got it to work.
The ASP.NET Web API Odata service had to be modified to enable CORS (Cross-Origin Requests).
http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
http://blogs.telerik.com/kendoui/posts/11-08-24/cross-domain_queries_to_odata_services_with_jquery
If I have a store, like this example:
var myStore = Ext.create("Ext.data.Store", {
model: "User",
proxy: {
type: "ajax",
url : "/users.json",
reader: {
type: "json",
rootProperty: "users"
}
},
autoLoad: true
});
I want to cache the users.json file in the application cache, so I add it to app.json as follows:
/**
* Used to automatically generate cache.manifest (HTML 5 application cache manifest) file when you build
*/
"appCache": {
/**
* List of items in the CACHE MANIFEST section
*/
"cache": [
"index.html",
"users.json"
],
/**
* List of items in the NETWORK section
*/
"network": [
"*"
],
/**
* List of items in the FALLBACK section
*/
"fallback": []
},
Looking in Chrome developer tools, I can see that the .json file has been added to the application cache correctly, along with index.html.
I would expect this to 'just work' offline. Unfortunately it doesn't, it tries to request the json file, which doesn't work as it is offline, and then it no longer uses that data in the application.
The rest of the application works perfectly fine. Any ideas?
Found the solution from looking into the API documentation and doing a bit of trial and error with properties. It is not obvious at all.
The problem was, the requests for the .json files was being appending with additional arguments, ?dc=XXXXXXX and paging arguments. There are two additional properties that need to be applied to the proxy: noCache and enablePagingParams. This did the trick.
var myStore = Ext.create("Ext.data.Store", {
model: "User",
proxy: {
type: "ajax",
url : "/users.json",
noCache: false,
enablePagingParams: false,
reader: {
type: "json",
rootProperty: "users"
}
},
autoLoad: true
});
I also needed to update the header comment on my test cache.manifest file, to ensure that the changes to the stores were detected correctly, as I kept getting Loader errors. This isn't a problem once you use sencha CMD to build the production version as it auto-generates the application cache file for you.
NOTE: I did already have the following, widely documented, in my app.js file as well:
Ext.Loader.setConfig({
disableCaching: false
});
Hope this helps someone!
I'm developing an authentication website that authenticate data from a web service. My website is running locally and the web service is running on different domain ex: test.abc.com. if authentication is success then store the response in cookies.
if the data is available in cookies and not expired then in the second call do not ask for authentication but need to validate the user from back end. For that i am using below code.
$.ajax({
url:"https://test.abc.com/test/DummyTest",
method:"GET",
dataType:"json",
beforeSend: function(xhr){
xhr.withCredentials = true;
},
success:function(data){
alert(Success);
},
error:function(xhr,err){
alert("Error");
});
I am using jquery1.6
I have checked the browser Options and the cookies are stored with my localhost ip(160.225.230.50) address. but the web service is in different domain(abc.com). while accessing the second time, I got Error response.
Please help out me on this.
For this to work your auth page should send Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers.
When using Access-Control-Allow-Credentials: true you cannot set Access-Control-Allow-Origin to wildcard, but need to specify origin: Access-Control-Allow-Origin: https://abc.com
Also, there is a simpler way to set xhr fields:
$.ajax({
xhrFields: {
withCredentials: true
},
type: 'POST',
url: ...
});
I am new to sencha touch and web services as well. I have a json file using which i am populating my screen like this:
proxy:{
type:'ajax',
url:'data/messages.json',
reader:
{
type:'json',
rootProperty:'alerts'
}
}
This works fine for me. But when i try to do the same web services i get this on console:
OPTIONS
http://{server}/aosmobile/alerts?_dc=1336122076647&page=1&start=0&limit=25
404 (Not Found)
XMLHttpRequest cannot load
http://{server}/aosmobile/alerts?_dc=1336122076647&page=1&start=0&limit=25.
Origin http://localhost:8080 is not allowed by
Access-Control-Allow-Origin.
I use this method to achieve the same:
proxy:{
type:'rest',
url:'http://{server}/aosmobile/alerts',
headers: {
'Accept' : 'application/json'
},
reader:
{
type:'json',
rootProperty:'alerts'
}
}
The url is deployed. Please do help.
It seems you're doing a cross-domain request. Following proxy definition may help:
proxy:{
type:'scripttag',
url:'http://{server}/aosmobile/alerts',
reader:
{
type:'jsonp',
rootProperty:'alerts'
}
}