My problem is the json I am getting doesn't have a root. I can get the store to load the URL and I get the JSON back but the store data is empty and nothing shows in the callback.
Json:
[
{
"symbol": "GM"
},
{
"symbol": "GA"
}
]
Model and Store:
Ext.define('Symbol', {
extend: 'Ext.data.Model',
fields: ['symbol']
});
Ext.define('Doc.store.symbol', {
extend: 'Ext.data.Store',
model: 'Symbol',
proxy: {
type: 'jsonp',
url: 'datasource/symbol',
reader: {
type: 'json',
model: 'symbol'
},
}
});
I tried removing the root as well but nothing came back in the store or the callback. My googlefu is turning up nothing good on json without root.
the root should be defined as blank root:''
Here is a code demonstrating the proper setup:
Ext.define('boomer', {
extend:'Ext.data.Model',
fields: ['symbol'],
proxy: {
type: "ajax",
url: "data.json",
extraParams: {
},
reader: {
type: "json",
root: "",
successProperty: "success"
}
}
});
var store = Ext.create('Ext.data.Store',{
model: 'boomer',
});
store.load({
callback:function(){
Ext.Msg.alert('Store Items', store.data.items.length);
console.log(store.data.items);
}
});
Here is a fiddle demonstrating working code.
extend Ext.data.reader.Json to adjust your response.Later use it inside proxy reader.
there is a answer here
Related
I am new to ExtJS so please excuse if this is very basic. I googled but couldn't find any useful answer.
I have a Store with proxy type AJAX:
tableStore = Ext.create('Ext.data.Store', {
model: 'TableData',
pageSize: 20,
proxy: {
type: 'ajax',
url: url
}
});
The call to url returns a JSON object. I want to get this JSON object in some local variable to do some processing.
Is this possible?
Thanks.
You can refer to the data obtained in the method transform:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'}
, {name: 'title', type: 'string'}
]
, proxy: {
type: 'rest'
, reader: {
type: 'json'
, transform: {
fn: function (data) {
//you code here
return data;
}
, scope: this
}
}
}});
try with this
tableStore.getProxy().getReader().rawData
I have a JSON response that is nested like the following (simplified, but same format):
{
"response":{
"v":"1.0",
"users":[
{
"firstName":"Nicole",
"LastName":"A",
},
{
"firstName":"John",
"LastName":"B",
},
{
"firstName":"Bob",
"LastName":"C",
}
],
}
}
Here is the model:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'firstName'
},
{
name: 'lastName'
}
]
}
});
I am starting from the sencha architect tutorial for CityBars, so most of the code should be quite basic, and I am just trying to get the users from the json response loaded. Here is the controller:
Ext.define('MyApp.controller.User', {
extend: 'Ext.app.Controller',
launch: function() {
var me = this;
Ext.Viewport.setMasked({ message: 'Loading Attendees...' });
me.getUsers(function (store) {
me.getDataList().setStore(store);
});
},
getUsers: function(callback) {
var store = Ext.data.StoreManager.lookup('UserStore'),
url = 'http://urltogetjsonresponse'
store.getProxy().setUrl(url);
store.load(function() {
callback(store);
});
},
});
Here is the store:
Ext.define('MyApp.store.UserStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.User',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'
],
config: {
model: 'MyApp.model.User',
storeId: 'UserStore',
proxy: {
type: 'jsonp',
reader: {
type: 'json',
rootProperty: 'response.user'
}
}
}
});
I tried 'response.user' but it did not work for me. I have already looked all over and know that using rootProperty: 'user' would work, if the users attribute were at the same level as "response" instead of nested under it. I have also tried adding record: 'users' but that did not seem to work either.
If anybody knows if this is doable and has an easy solution to this, that would be great. I don't actually understand how the proxy works, so if anybody can explain a bit about that, it would be helpful too. Thanks.
Taken from Sencha's documentation about the JSON reader :
{
"count": 1,
"ok": true,
"msg": "Users found",
"users": [{
"userId": 123,
"name": "Ed Spencer",
"email": "ed#sencha.com"
}],
"metaData": {
"idProperty": 'userId',
"rootProperty": "users",
"totalProperty": 'count',
"successProperty": 'ok',
"messageProperty": 'msg'
}
}
The rootProperty here is 'users', so you'll need to specify users (which is the name of the array containing your instances of model) and not user .
I have following sample application, where i am trying to implement paging functionality for sencha touch , but i am facing issues in setting the page size and when i hit load more same old data is being repeated in the list, please can i know where i am going wrong ?
Ext.define("WEB.view.SearchView", {
extend: 'Ext.dataview.List',
xtype: 'SearchView',
requires: [
'Ext.dataview.List',
'Ext.data.Store',
'Ext.List'
],
config: {
title: 'Search Results',
plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false,
loadMoreText: 'Loading...',
noMoreRecordsText: 'No More Records'
},
{ xclass: 'Ext.plugin.PullRefresh' }
],
//onItemDisclosure: false,
store: {
id: 'MySearchStore',
autoLoad:false,
pageSize: 15,
clearOnPageLoad: false,
fields: [
{ name: "ShortDescription", type: "string" },
{ name: "MatchId", type: "bool" }
],
proxy: {
type: 'jsonp',
url: 'http://Example.com',
reader: {
type: 'json',
rootProperty: 'd'
}
}
},
itemTpl: new Ext.XTemplate('<tpl if="MatchId == 1">', '<p style="color: #ff9900">{BlockNo}</p><p>{ShortDescription}</p>', '</tpl>',
'<tpl if="MatchId == 0">', '<p >{BlockNo}</p><p>{ShortDescription}</p>', '</tpl>'
)
}
});
This is a simple issue but can be a bottleneck when you are starting out...
Set the pageParam in the store to what you use for pagination on the server side... Then everything should work fine...
Note: Your actual pagination logic should be on the server side... Sencha only provides a means to display the content a few at a time...
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
config: {
storeId: 'MyJsonStore',
proxy: {
type: 'ajax',
pageParam: 'page',//This parameter needs to be modified
reader: {
type: 'json'
}
}
}
});
I am trying to use Ext JS 4 and was playing with one of the grid examples and wanted to use JSON rather than XML. No mater how I code the JSON data, I get no records to load.
Here is my code:
Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [{
name: 'common',
type: 'string'
}, {
name: 'botanical',
type: 'string'
}, {
name: 'light'
}, ]
});
// Create the Data Store.
var store = Ext.create('Ext.data.Store', {
// Destroy the store if the grid is destroyed.
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
url: 'plants.json',
reader: {
type: 'json',
root: 'records'
}
},
sorters: [{
property: 'common',
direction: 'ASC'
}]
});
Here is my data:
{
"records": [
{
"common": "Bloodroot",
"botanical": "Sanguinaria canadensis",
"light": "Mostly Shady"
}, {
"common": "test",
"botanical": "I do not know",
"light": "Mostly Shady"
}
]
}
The XML reader works great, but we want to use JSON.
Thanks in advance
Have a look at this thread! You need to check your url path to plants.json, path starts from 'index.html' or some other similar starting point , and not the .js file where store is located. I tested your code and it works fine, also use autoLoad:true in your Ext.data.Store, i dont see your grid code so.. Cheers!
I've been trying to figure this out all evening but to no avail. I have a JSON structure as follows (coming from another system so I can't change its structure):
{
"parents":{
"parent":[
{
"parentId":1,
"children":{
"child":[
{
"childId":1,
},
{
"childId":2,
}
]
}
},
{
"parentId":2,
"children":{
"child":[
{
"childId":1,
},
{
"childId":2,
}
]
}
}
],
"pageNum":1,
"pageSize":2
}
}
However, I can't figure out what the correct structure for the data models should be. I've tried the following but it does not work. BTW, I can access the parent information. The issue is with accessing the child information. So, I guess there is something wrong with how I've set up the relationship data.
Ext.regModel("ParentModel", {
hasMany: {
model: 'ChildrenModel',
name: 'children.child' // not too sure about this bit
},
fields: [
{name: 'parentId', type: 'string'}
],
proxy: {
type: 'ajax',
url : 'models.json',
reader: {
type: 'json',
root: 'parents.parent' // this works fine
}
}
});
Ext.regModel('ChildrenModel', {
belongsTo: 'ParentModel', // not too sure about this bit
fields: [{name: 'childId', type: 'string'}]
});
with a data store:
Ext.regStore('ParentModelStore', {
model: 'ParentModel',
autoLoad:true
});
I'm using the following template which gets me the parent information, but I can't get the child data from it:
myapp.views.ParentView = Ext.extend(Ext.Panel, {
layout: 'card',
initComponent: function() {
this.list = new Ext.List({
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div>',
'{parentId}', // this works fine
'</div>',
'<tpl for="children.child">', // this doesn't work
{childId}
'</tpl>',
'</tpl>',
),
store: 'ParentStore',
});
this.listpanel = new Ext.Panel({
layout: 'fit',
items: this.list,
});
this.items = this.listpanel;
myapp.views.ParentView.superclass.initComponent.apply(this, arguments);
},
});
Ext.reg('ParentView', myapp.views.ParentView);
What I'm struggling with is the fact that both the "child" and "parent" elements are surrounded by another element, "children" and "parents" respectively.
Any help much appreciated.
Thanks in advance,
Philip
PS If I remove the outer "children" wrapping element and just leave the inner "child" element (and change "children.child" to "child" in the model definition) the code works fine.
PPS I'm answering my own question:
Doh! I forgot to add the "children" element to the ParentModel's fields.
It should be as follows (note: I didn't need to specify the 'hasMany' or 'associations' elements - not too sure why this is or what is the benefit of including them):
Ext.regModel("ParentModel", {
fields: [
{name: 'parentId', type: 'string'},
{name: 'children'} // VERY IMPORTANT TO ADD THIS FIELD
],
proxy: {
type: 'ajax',
url : 'models.json',
reader: {
type: 'json',
root: 'parents.parent' // this works fine
}
}
});
Ext.regModel('ChildrenModel', {
fields: [{name: 'childId', type: 'string'}]
});
The template works fine too:
'<tpl for="children.child">', // this syntax works too.
{childId}
'</tpl>',
Ran into a similar problem recently..I think.
You need to specify the mapping to the data you want in your model.
For example :
Ext.regModel('Album', {
fields: [
{name: 'artist_name', mapping: 'album.artist.name'},
{name: 'artist_token', mapping: 'album.artist.token'},
{name: 'album_name', mapping: 'album.name'},
{name: 'token', mapping: 'album.token'},
{name: 'small_cover_url', mapping: 'album.covers.s'},
{name: 'large_cover_url', mapping: 'album.covers.l'}
]/*,
getGroupString : function(record) {
return record.get('artist.name')[0];
},*/
});
consumes this JSON:
{
"album":{
"covers":{
"l":"http://media.audiobox.fm/images/albums/V3eQTPoJ/l.jpg?1318110127",
"m":"http://media.audiobox.fm/images/albums/V3eQTPoJ/m.jpg?1318110127",
"s":"http://media.audiobox.fm/images/albums/V3eQTPoJ/s.jpg?1318110127"
},
"artist":{
"name":"New Order",
"token":"OyOZqwkN"
},
"name":"(The Best Of)",
"token":"V3eQTPoJ"
}
},
I've added a converter to allow the template access the data in the model consistently regardless if a single object or an array is returned.
Ext.regModel("ParentModel", {
fields: [
{name: 'parentId', type: 'string'},
{name: 'children', convert:
function(value, record) {
if (value.child) {
if (value.child instanceof Array) {
return value.child;
} else {
return [value.child]; // Convert to an Array
}
}
return value.child;
}
}
],
proxy: {
type: 'ajax',
url : 'models.json',
reader: {
type: 'json',
root: 'parents.parent' // this works fine
}
}
});
Note: I don't actually need to define the ChildrenModel. I guess I can get away without defining it as Sencha must be automatically type converting it.