Why i can't use JSONP Store with this url http://www.sozler.im/rest/categories
When i am trying on Sencha Architect, right click on Store/Load Data it gives an error, but it works on browser
Here is the source
Ext.define('SozlerimMobile.store.CategoryStore', {
extend: 'Ext.data.Store',
requires: [
'SozlerimMobile.model.Categories',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'
],
config: {
autoLoad: true,
autoSync: true,
model: 'SozlerimMobile.model.Categories',
storeId: 'CategoryStore',
proxy: {
type: 'jsonp',
extraParams: {
Status: 'Active'
},
url: 'http://www.sozler.im/rest/categories/',
reader: {
type: 'json',
clientIdProperty: 'id',
idProperty: 'id',
rootProperty: ''
}
}
}
});
The webservice has to return JSONP (JSON with function callback - see http://json-p.org/)
The more info can be found in: https://stackoverflow.com/a/2067584/282834
Related
I am new for this platform, Now i am unable to set dyanimic url using category id and token.
What i want:
I have list different items, which have different ids but same token, token(tokent is same one user) getting from login phase. I want to get value accorading to category id from the server.
Here is the my model:
Ext.define('MyApp.model.CategoryDisplayModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category',
'name',
],
belongsTo: "MyApp.model.CategoryDisplayModel"
}
});
and another related model is:
Ext.define('MyApp.model.CategoryDisplayModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryDisplayModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name:'name'},
{name: 'category'},
{name: 'author'},
],
}
});
What i am set in store, but could not work:
Ext.define('MyApp.store.CategoryValueStore', {
extend: 'Ext.data.Store',
alias: 'store.CategoryValueStore',
requires: [
'MyApp.model.CategoryDisplayModel'
],
config: {
model: 'MyApp.model.CategoryDisplayModel',
storeId: 'categoriesvaluestore',
proxy: {
type: 'rest',
url: 'http://horror/myapp/api/word/searched_words/catID/'+ 1+'/'+ SDSILLYTOKEN+'/'+650773253e7f157a93c53d47a866204dedc7c363,
noCache: false,
reader: {
type: 'json',
rootProperty: ''
} } }
});
How to set above url, dynamic, cat id and token may be differnt.
But it works when i set these in store
Ext.define('MyApp.store.ArchitectureDisplayStore',{
extend: 'Ext.data.Store',
requires:[
'MyApp.view.Main'
],
config:
{
model: 'MyApp.model.CategoryDisplayModel',
autoLoad:true,
id:'Category',
proxy:
{
type: 'ajax',
url : 'http://horror/myapp/api/word/searched_words/catID/1/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363', // file containing json data
reader:
{
rootProperty:''
} } }
});
In View , I set getting value on list like this:
Ext.define("MyApp.view.ArchitectureDisplayMain", {
extend: 'Ext.Container',
alias: "widget.architecturewords",
config: {
{
xtype: 'list',
scrollable: true,
itemId: 'demolist',
itemTpl: [
'<div><tpl for="data"><ul class="catList">{name} -test- {category}</ul> <ul>{author}</ul></tpl></div>'
],
store: 'categoriesvaluestore',
}
}
});
My category display model:
Ext.define('MyApp.model.CategoryModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
'cat_id',
'category_name',
],
belongsTo: "MyApp.model.CategoryModel"
}
});
and
Ext.define('MyApp.model.CategoryModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name: 'cat_id'},
{name: 'category_name'},
],
}
});
EDIT:
Ext.define('MyApp.view.Category', {
extend: 'Ext.List',
alias: "widget.category",
config: {
title: 'Stores',
cls: 'category-data',
scrollable: false,
store: 'CategoryStore',
itemTpl: [
'<div class="categoryListings">',
'<tpl for="data">',
'<span onClick="catOption({cat_id})">{category_name}</span> ',
'</tpl>',
'</div>',
].join('')
}
//}
});
function catOption(id){
console.log("ID--"+id);
var tokan= '650773253e7f157a93c53d47a866204dedc7c363';
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add([
{ xtype: 'wordsview' }
]);
} and others
In wordsview, I like to display respective words of clicked category.
It is ok, when click this, first item of id p1, it shows next view.
Please tell me, How to get dynamic data accorading to its category id and token. please give some solution.Thank you advance.
If i understood you correctly
Let's say if you have category id and token in localStorage.
You can do like this
proxy:
{
type: 'ajax',
url : 'http://horror/myapp/api/word/searched_words/catID/'+localStorage.catId+'/SDSILLYTOKEN/'+localStorage.token,
reader:{
rootProperty:''
}
}
OR
Do as #Alex posted. That is better way.. Like
function catOption(id){
console.log("ID--"+id);
var token= '650773253e7f157a93c53d47a866204dedc7c363';
var url = 'http://horror/myapp/api/word/searched_words/catID/'+id+'/SDSILLYTOKEN/'+token;
Ext.getStore("categoriesvaluestore").getProxy().setUrl(url);
Ext.getStore("categoriesvaluestore").load();
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add({ xtype: 'wordsview' });
}
When accessing your Store from your View or anywhere else, you can dinamically change the Url this way:
var stProxy = Ext.StoreMgr.get("myStore").getProxy();
stProxy.setUrl("http://the.new.url");
Ext.StoreMgr.set("myStore").setProxy(stProxy);
--
The particular problem in your scenario is that you may have to populate your list manually. If you want a List to include the result of calling the same Store with different URLs, I suggest to build a new local Store loading the content of all iterations. Then make the List "store" property be this global Store.
I've created a model with following structure:
Model Code:
Ext.define('MyApp.model.FavoriteScreen', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'Name'
},
{
name: 'ScreenId'
}
]
}
});
And I've created a store with following structure:
Store code:
Ext.define('MyApp.store.FavoriteStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.FavoriteScreen'
],
config: {
autoLoad: true,
model: 'MyApp.model.FavoriteScreen',
storeId: 'FavStore',
proxy: {
type: 'ajax',
api: {
read: '/api/sample/FavoriteList'
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
});
Now I want to get particular record from this store but my store does not return any value. To get value from store I've written following line of code:
var myStore = Ext.getStore('FavStore');
myStore.load({
scope: this,
callback: function (records, operation, success) {
if (success) {
Ext.Msg.alert(myStore.getAt(0).getData());
}
}
});
The above code I've written on The above code I’ve written on nestedlistleafitemtap event.
Any help is appreciated!!
First of all - don't use getData() - use get('name') for example.
Second - try to add logging before your loading call and inside your callback function. This way you can see whether you started loading and was it completed.
According to the docs, I should be able to define functions on a Model, and then call the function on instances of that model.
At least in the case where I load the model from a proxy, its not working.
My model:
Ext.define('MyApp.model.Detail', {
extend: 'Ext.data.Model',
fields: [
'someField',
'anotherField',
],
someFunction: function() {
//do something
},
proxy: {
type: 'ajax',
url: 'http://example.com/details',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success',
}
},
});
Store:
Ext.define('MyApp.store.DetailStore', {
extend: 'Ext.data.Store',
storeId: 'detailStore',
model: 'MyApp.model.Detail',
});
Controller:
Ext.define('MyApp.controller.appController', {
extend: 'Ext.app.Controller',
init: function() {
this.getDetailStoreStore().addListener('load', this.newDetails, this);
},
stores: ['DetailStore'],
models: ['Detail'],
views : ['DetailView], //exists, not copied into question
newDetails: function(store, records) {
var details = records[0].data;
details.someFunction(); // Uncaught TypeError: Object #<Object> has no method 'someFunction'
}
});
The error happens in the newDetails function, when calling data.someFunction().
Do I have the wrong expectation?
The function exists on the model, so you would call:
records[0].someFunction();
I'm developing an app in Sencha Touch 2.0 that is supposed to parse JSON through a web service that resides on a different domain.
I'm stuck parsing JSON. If I use nodes with names like title, author description link etc then it works perfectly.
But if I use other names for nodes then it does not display anything.
Here is the JSON response I'm trying to parse:
http://stassuet.byethost15.com/services/test/index.php
This is what I'm doing to parse the response in Sencha app:
Ext.define('GS.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'GS.model.MainEvent',
'Ext.data.proxy.JsonP',
'Ext.data.proxy.Rest'
//'GS.util.JsonpX'
],
config: {
autoLoad: true,
model: 'GS.model.MainEvent',
storeId: '55',
headers: {
"Accept": "text/xml"
//"access-control-allow-origin": "*",
//"Origin": "goodnews.pk",
//"Referer": "goodnews.pk"
},
method: 'GET',
callbackKey: 'myFunction',
proxy: {
type: 'jsonp',
url: 'http://stassuet.byethost15.com/services/test/index.php',
reader: {
type: 'json',
rootProperty: 'albums.images'
}
}
}
});
Where am I going wrong?
You seem to have a lot of configurations set even though you don't need them. For example:
headers
method
callbackKey
Is there a reason for this?
Anyway, using this class, everything loads as it should:
Ext.define('Example.store.SO', {
extend: 'Ext.data.Store',
config: {
autoLoad: true,
fields: [
'name',
'author',
'last_modified'
],
proxy: {
type: 'jsonp',
url: 'http://stassuet.byethost15.com/services/test/index.php',
reader: {
rootProperty: 'albums.images'
}
}
}
});
I've got my sencha-touch app wired up as I believe it should be, and when I load it into Chrome, the Javascript console doesn't throw any errors. The WebService is finally returning the appropriate data, yet for some reason I can't for the life of me figure out why the panel is blank.
Here's the APP URL
http://rpcm.infinitas.ws/
Here's the WebService URL
http://rpc.infinitas.ws/Vimeo/Read?_dc=1308083451839&limit=25&callback=stcCallback1001
And here is some relevant code.
CONTROLLER
rpc.controllers.VimeoController = new Ext.Panel(
rpc.views.Vimeo.index
);
VIEW
rpc.views.Vimeo.index = {
id: 'VideoView',
title: 'Videos',
tpl: rpc.templates.VimeoTemplate,
iconCls: 'tv',
dockedItems: [{ xtype: 'toolbar', title: 'Videos'}],
store: 'rpc.stores.VimeoStore'
};
STORE
rpc.stores.VimeoStore = new Ext.data.Store({
id: 'VimeoStore',
model: 'rpc.models.VimeoModel',
proxy: {
type: 'scripttag',
url: WebService('Vimeo', 'Read'),
method: 'GET',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});
MODEL
rpc.models.VimeoModel = Ext.regModel('rpc.models.VimeoModel', {
fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'}
]
});
TEMPLATE
rpc.templates.VimeoTemplate = new Ext.XTemplate([
'<tpl for=".">',
'<div>',
'{title}',
'</div>',
'</tpl>'
]);
JSON RESPONSE
stcCallback1001({"results":[{"id":25036464,"title":"Power of A Surrendered Life: The Farewell Sermon"},{"id":25036610,"title":"Child Dedication June 2011"},{"id":24734142,"title":"Power of A Surrendered Life: Connection"},{"id":24884833,"title":"Finance Update June 2011"},{"id":24587711,"title":"Papua, Indonesia Sharing May 2011"},{"id":24232427,"title":"ICHTHUS: Coming King"},{"id":23868560,"title":"ICHTHUS: Healer"},{"id":23486615,"title":"ICHTHUS: Sanctifier"},{"id":23211649,"title":"ICHTHUS: Saviour"},{"id":23867961,"title":"Elder Announcement re: Brent Trask"},{"id":22998163,"title":"Triumph of Grace: Risen Lord"},{"id":23687914,"title":"Triumph of Grace: Reigning King"},{"id":23692076,"title":"KINGDOM now: For Thine Is The Kingdom"},{"id":23694183,"title":"KINGDOM now: Deliver Us From Evil"}],"success":true});
Any help or direction will be greatly appreciated.
The example response you provided looks like JSONP instead of plain JSON. You probably want an Ext.data.proxy.JsonP.
To use this, you could change your store to look like this:
rpc.stores.VimeoStore = new Ext.data.Store({
id: 'VimeoStore',
model: 'rpc.models.VimeoModel',
proxy: {
type: 'jsonp',
url: WebService('Vimeo', 'Read'),
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});
Best of luck to you!
remove the '' from the view.
writelike this:
store: rpc.stores.VimeoStore