Reading data and displaying - extjs4

I am trying to get all Books from the server (local PHP script), that has a book ID of 1.
I think i will have to send a GET request with ID 1, so that the PHP script will return the records for ID 1.
When i searched i found out that i should make use of Ext.ModelManager.getModel to get this done. But i am unable to find any examples that would help me to do this.
Can someone help me out.

In your store, add proxy and set extraParams.
proxy: {
type: 'ajax',
url: 'your url'
},
listeners: {
'beforeload': function (t,n) {
this.proxy.extraParams.Id = yourId
},

Related

SPServices loading but not working

$().SPServices({
operation: "GetGroupCollectionFromUser",
userLoginName: $().SPServices.SPGetCurrentUser(),
async: false,
debug: true,
completefunc: function (xData, Status) {
console.log($.fn.jquery);
console.log(xData.responseXML);
console.log(xData.responseXML.xml);
}
});
I am having a problem with SPServices not working on our dev server. It works fine on prod and testing but not on dev for some reason. If I run the code above I get the following in the console.
{readyState: 0, responseXML: undefined, status: 0, statusText: "No Transport"}
I read online this can be a problem with cross domain transfers so I set the following:
$.support.cors = true;
With that I now get the following:
{readyState: 0, responseXML: undefined, status: 0, statusText: "Error: Invalid Argument"}
I think this is because the SPGetCurrentUser call is always just returning an empty string for some reason instead of the user. Has anyone seen this behavior before? What are common things that can cause SPServices to load but not be able to execute calls? Thanks for the help.
So turns out this appears to be a bug with SPServices. It appears that when you use SPServices on a site with a port number for some reason it duplicates the port number and so everything breaks. So as in my example above I did not specify the webURL and so SPServices used the current web but duplicates the port as shown here:
correct url: http://yourserver:123/sites/yoursite
SPServices: http://yourserver:123123/sites/yoursite
To fix this simply specify a site relative webURL as shown in the working code below. Hopefully this saves someone some aggravation.
var site = "/sites/yoursite";
$(document).ready(function () {
$().SPServices({
operation: "GetGroupCollectionFromUser",
userLoginName: $().SPServices.SPGetCurrentUser({
webURL: site
}),
webURL: site,
async: false,
completefunc: function (xData, Status) {
//Do stuff here
}
});
});
Thank you for your post. Actually i got statusText:"Network Error" when i try to get the user groups using jquery in sharepoint. After passing the site url to the site variable like above code. my issue got resolved.

Cross-domain requests does not work using Sencha Touch 2

I have an application which displays some articles. The application works perfectly on Wamp in localhost. I've uploaded my database management in an other server. I already configured my ArticleStore.js in JSONP but when I run my application the following error appears in the console :
Resource interpreted as Script but transferred with MIME type text/html: "http://[ip_address]:[port]/totos?_dc=1372152920457&keyword=&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1"
and :
Uncaught SyntaxError: Unexpected token : totos:1
When I clic on the url above I'm redirected to the view which display the following content :
{"articles_list":[{"id":"28","title":"Prixtel dope son service client avec le forfait Sumo"}],"total":1}
For sake of simplicity, I tested to display just the title of one article. Here's the JSON response for the line 1 when I clic on 'totos:1':
{"articles_list":[{"id":"28","title":"Prixtel dope son service client avec le forfait Sumo"}],"total":1}
Here's my ArticleStore.js content :
Ext.define("MyApp.store.ArticleListStore",
{
extend: "Ext.data.Store",
requires: ["MyApp.model.ArticleModel","Ext.data.proxy.JsonP"],
config: {
model: "MyApp.model.ArticleModel",
proxy: {
type: 'jsonp',
model: "MyApp.model.ArticleModel",
url: "http://62.23.96.124:81/totos",
},
reader: {
type: "json",
rootProperty: "articles_list",
totalProperty: "total"
},
},
autoLoad: true
}
});
When I was launched my resquest in localhost directly on Wamp server my JSON responses had the same syntax (The JSON tree architecture is the same). Here's an example :
{"articles_list":[{"id":"384","title":"Skype est disponible sur Windows Phone"}],"total":1}
I cannot see any difference between the two responses. However, I have an 'Unexpected token' error!. As you can see the two nodes 'articles_list' and 'total' have the same place in the JSON tree for the two examples. I don't understand why there is an syntax error. I'm really lost. Does anyone can help me, please ?
Thanks a lot in advance for your help.
Your server is not formatting the response correctly for JSON-P. JSON-P essentially needs your response to be embedded within a function, which is specified by the callbackKey property of your proxy:
proxy: {
type: 'jsonp',
url : "http://62.23.96.124:81/totos",
callbackKey: 'myCallbackKey'
}
Then, on your server, you need to use that parameter to wrap your response:
myCallbackKey({
"articles_list": [
{
"id":"28",
"title":"Prixtel dope son service client avec le forfait Sumo"
}
],
"total":1
})
You can learn more about this from the docs here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.data.proxy.JsonP.
You also will want to know a little more about the purpose of JSON-P, and how it works. Find out more here: What is JSONP all about?

Sencha touch 2 - show response (JSON string) on proxy loading

Is there a way to output the json-string read by my store in sencha touch 2?
My store is not reading the records so I'm trying to see where went wrong.
My store is defined as follows:
Ext.define("NotesApp.store.Online", {
extend: "Ext.data.Store",
config: {
model: 'NotesApp.model.Note',
storeId: 'Online',
proxy: {
type: 'jsonp',
url: 'http://xxxxxx.com/qa.php',
reader: {
type: 'json',
rootProperty: 'results'
}
},
autoLoad: false,
listeners: {
load: function() {
console.log("updating");
// Clear proxy from offline store
Ext.getStore('Notes').getProxy().clear();
console.log("updating1");
// Loop through records and fill the offline store
this.each(function(record) {
console.log("updating2");
Ext.getStore('Notes').add(record.data);
});
// Sync the offline store
Ext.getStore('Notes').sync();
console.log("updating3");
// Remove data from online store
this.removeAll();
console.log("updated");
}
},
fields: [
{
name: 'id'
},
{
name: 'dateCreated'
},
{
name: 'question'
},
{
name: 'answer'
},
{
name: 'type'
},
{
name: 'author'
}
]
}
});
you may get all the data returned by the server through the proxy, like this:
store.getProxy().getReader().rawData
You can get all the data (javascript objects) returned by the server through the proxy as lasaro suggests:
store.getProxy().getReader().rawData
To get the JSON string of the raw data (the reader should be a JSON reader) you can do:
Ext.encode(store.getProxy().getReader().rawData)
//or if you don't like 'shorthands':
Ext.JSON.encode(store.getProxy().getReader().rawData)
You can also get it by handling the store load event:
// add this in the store config
listeners: {
load: function(store, records, successful, operation, eOpts) {
operation.getResponse().responseText
}
}
As far as I know, there's no way to explicitly observe your response results if you are using a configured proxy (It's obviously easy if you manually send a Ext.Ajax.request or Ext.JsonP.request).
However, you can still watch your results from your browser's developer tools.
For Google Chrome:
When you start your application and assume that your request is completed. Switch to Network tab. The hightlighted link on the left-side panel is the API url from which I fetched data. And on the right panel, choose Response. The response result will appear there. If you have nothing, it's likely that you've triggered a bad request.
Hope this helps.
Your response json should be in following format in Ajax request
{results:[{"id":"1", "name":"note 1"},{"id":"2", "name":"note 2"},{"id":"3", "name":"note 3"}]}
id and name are properties of your model NOte.
For jsonp,
in your server side, get value from 'callback'. that value contains a name of callback method. Then concat that method name to your result string and write the response.
Then the json string should be in following format
callbackmethod({results:[{"id":"1", "name":"note 1"},{"id":"2", "name":"note 2"},{"id":"3", "name":"note 3"}]});

Random numbers added to extjs data store ajax call

var resource_store = Ext.create('Ext.data.Store', {
pageSize: 10,
autoLoad: true,
fields: ['id','r_number','c_number','resource_name','resource_desc','resource_url','resource_file'],
proxy: {
type: 'ajax',
url: BASE_URL+'courses/resources/displayResources/'+course_id,
reader: {
type: 'json',
root: 'results'
}
},
storeId: 'id'
});
I'm using Extjs4 data store like this way.
When i see the ajax calls a random number is appended to the url
http://localhost/Edu_web/index.php/courses/resources/displayResources/PTGRE14?_dc=1328442262503&page=1&start=0&limit=10
Even though i use
actionMethod:{
read: 'POST'
}.
?_dc=1328442262503 still appears in the url.
how to remove these parameters in url. and send any parameters through POST
Even though i use actionMethod:{ read: 'POST' }.
?_dc=1328442262503 still appears in the url.
Of course it would. You should use actionMethods (with 's' at the end).
To remove _dc from GET request you should add noCache: false to proxy's config. Docs for noCache.
P.S. Using a POST for reading is a bad practise. You should only use a POST when you are modifying data on the server.
If there are any proxy in your network, before disabling the random number, check to see if they have caching disabled, otherwise the client, instead of downloading the updated pages from the server, will continue to read the previous ones stored in the proxy. The random number added to the call makes it different each time and the proxy will be forced to always download it from the server

Sencha Touch - RESTful load() specific instance URL problem (Store/model)

It seems there is a problem with loading a specific instance (load() function) using the rest proxy in a model/store object. example:
Code:
Ext.regModel('User', {
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
url : '/users'
}
});
//get a reference to the User model class
var User = Ext.ModelMgr.getModel('User');
//Uses the configured RestProxy to make a GET request to /users/123
User.load(123, {
success: function(user) {
console.log(user.getId()); //logs 123
}
});
This code is copied from Sencha touch's API. the generated URL is http://localhost/users?_dc=... instead of the desired (and documented) url http://localhost/users/123.
it also happens when using the store.load with a parameter.
Am I doing something wrong here?
Thanks
T
It seams the id parameter has been documented but not implemented. This has been discussed in the sencha forum [link]. A few non complete fixes are written in post #8 and post #13.