Drupal nested json not working in Sencha touch - extjs

My json format
Ext.data.JsonP.callback3({"nodes":[
{"node":{"title":"Dane Sample Name - Owner/Stylist/Daymaker","field_headshot":"","body":"Born and raised in Carencro, La., Dane knew from a young age that he wanted to become a successful hairdresser. \n","nothing":""}},
{"node":{"title":"Rahul - Owner/Stylist/Daymaker","field_headshot":"","body":"Since 1995 Jeanne has enjoyed helping people to feel and look beautiful.\n","nothing":""}}]})
Models
Ext.define('SampleApp.model.Drupal', {
extend: 'Ext.data.Model',
uses: [
'SampleApp.model.Drupal2'
],
config: {
fields : [
'node'
],
},
hasMany: {
model: 'Drupal2',
name : 'node',
associationKey: 'node' ,
}
});
Ext.define('SampleApp.model.Drupal2', {
extend: 'Ext.data.Model',
config: {
fields: [
'title','body'
]}
});
Store
Ext.define('SampleApp.store.DrupalStore', {
extend: 'Ext.data.Store',
requires: [
'SampleApp.model.Drupal2'],
config: {
autoLoad : true,
model: 'SampleApp.model.Drupal2',
proxy: {
type: 'jsonp',
url: 'data/data.json',
reader: {
type: 'json',
rootProperty: 'nodes.node'
}
}
}
});
The above is the nested json from drupal view and I am trying to use those 2 models and store to load list in my view.I am trying to add list of titles from node but List is not loading in the view.If I give root property as nodes then it is loading all the data but not mapping to node.Please help me on where I am going wrong.

Changed my Model, it is not using associations.Here is the Model that worked for me
Ext.define('SampleApp.model.Drupal', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'title',
mapping: 'node.title', // mapping worked
},
{
name: 'field_headshot',
mapping : 'node.field_headshot',
},
{
name: 'body',
mapping : 'node.body',
}
],
}
});

Related

How to create Extjs Models and its association with other models

Hello Everyone,
I am new to EXTJS and want to grasp Extjs models and its complexity as per the json response. For Example I have a sample Json response for which I want to create a model
This is my app.js file
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
launch: function() {
console.log('I am in app');
var store = Ext.create('AM.store.ExampleStore');
store.load();
console.log('After Loading the records');
}
});
This is json sample
[
{
"page": "0",
"data": [
{
"firstname": "puneet",
"id": "28170",
"lastname": "srivastava",
"area": "bangalore",
"profession": "Engineer"
},
{
"firstname": "v Durga",
"id": "28171",
"lastname": "Mallikrjuna",
"area": "bangalore",
"profession": "Extjs developer"
}
]
}
]
I created models as per my understanding. Model belongs to data part of json
Ext.define('AM.model.Example', {
extend: 'Ext.data.Model',
fields: ["firstname", "id", "lastname", "area", "profession"],
belongsTo : 'AM.model.Page'
});
Ext.define('AM.model.Page', {
extend: 'Ext.data.Model',
fields: ["page", "data"],
hasMany:{ model:"AM.model.Example", name: "example", associationKey : "data" }
});
Ext.define('AM.store.ExampleStore', {
extend: 'Ext.data.Store',
model : "AM.model.Page",
proxy: {
type: 'ajax',
url: 'example.json',
reader: {
type: 'json',
root: 'spaces'
}
},
listeners : {
'load' : function(store, records, successful) {
console.log('Loading the records');
console.log(store.data);
}
}
})
The data which I am getting after logging the store that contains only {page : 0} and the data part is missing.
Just want to know Where I am making the mistake or Any thing I am not including in the store or models.
Thanks
The Model should be:
Ext.define('AM.model.Example', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstname', type: 'string'},
{name: 'id', type: 'int'},
...
});
in your case, root should be data. Root means master node of your Json object.
Ext.define('AM.store.ExampleStore', {
extend: 'Ext.data.Store',
model : "AM.model.Page",
proxy: {
type: 'ajax',
url: 'example.json',
reader: {
type: 'json',
root: 'data'
}
},
listeners : {
'load' : function(store, records, successful) {
console.log('Loading the records');
console.log(store.data);
}
}
})

Sencha touch list tpl with nested data

I'm new to sencha. I'm create MVC structure by use sencha architect, touch 2.2.x version.
I want to show nested data to a list control but I'm not sure how to define the tmp.
Here is sample of data return from server
{
"data":
[
{"AcctId": 1, "AcctNum": "A", "Alias": "aa"},
{"AcctId": 2, "AcctNum": "B", "Alias": "bb"},
{"AcctId": 3, "AcctNum": "C", "Alias": "cc"}
]
}
this is model, I define nested model
Ext.define('MyApp.model.Data', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.LoginAlias'
],
config: {
hasMany: {
model: 'MyApp.model.LoginAlias',
name: 'LoginAlias'
}
}
});
Ext.define('MyApp.model.LoginAlias', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'AcctId'
},
{
name: 'AcctNum'
},
{
name: 'Alias'
}
]
}
});
This is Stores to get data, It will be cross server data so I use JsonP
Ext.define('MyApp.store.MyJsonPStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Data'
],
config: {
autoLoad: true,
model: 'MyApp.model.Data',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'http://localhost:8000/test/get_alias/',
reader: {
type: 'json'
}
}
}
});
Finally the List
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
config: {
store: 'MyJsonPStore',
itemTpl: [
'<div>List Item {AcctId}</div>'
]
}
});
I can see that the Store can get data from server in Sencha Architect by click on the "eye" icon next to the Store.
I try the List tpl with data.AcctId or change List store to MyJsonPStore.data but all not work.
Please help, thanks very much.
p/s: I try with non-nested model, and the List work ok. And this is the main js file, In case it needed
Ext.Loader.setConfig({
});
Ext.application({
models: [
'Data',
'LoginAlias'
],
stores: [
'MyJsonPStore',
'MyStore'
],
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.MyList', {fullscreen: true});
}
});
1. Data structure
Not sure it's useful to define MyApp.model.Data as it's only the root of your list of data. So you could give away the hasMany logic.
2. Data representation
Ext.dataview.List is designed to show simple lists only. For nested lists, consider extending Ext.dataview.NestedList. (but if 1. is true, you won't need it).
3. Data access
To get direct access to the data you need to display, simply add rootProperty: 'data' to your proxy's reader config object:
proxy: {
type: "jsonp",
url: 'http://server.ext/path/to/MyApp/app/data/sample.ashx',
reader: {
type: "json",
rootProperty: 'data'
}
}

Is Sencha ExtJS association POST wrong?

So, I have a problem using Sencha ExtJs 4.1 Associations.
I have something like:
Models
Ext.define('Tpl.model.User', {
extend: 'Ext.data.Model',
requires: ['Tpl.model.PostTemplate'],
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'postTemplate', type: 'int' }
],
associations: [
{ type: 'belongsTo', name: 'postTemplate', model:'Tpl.model.PostTemplate', associationKey: 'postTemplate', primaryKey: 'id', foreignKey: 'postTemplate' }
]
});
and
Ext.define('Tpl.model.PostTemplate', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'blah', type: 'string' }
],
associations: [
{ type: 'hasMany', model: 'Tpl.model.User' }
]
});
Stores
Ext.define('Tpl.store.Users', {
extend: 'Ext.data.Store',
model: 'Tpl.model.User',
autoLoad: true,
proxy: {
type: 'rest',
url: '../users',
reader: {
type: 'json',
root: ''
},
writer: {
type: 'json'
}
}
});
Ext.define('Tpl.store.PostTemplate', {
extend: 'Ext.data.Store',
model: 'Tpl.model.PostTemplate',
autoLoad: true,
proxy: {
type: 'rest',
//appendId: true,
url: '../postTemplates/',
reader: {
type: 'json',
root: ''
},
writer: {
type: 'json'
}
}
});
The problem is that I'm getting a POST like this:
{
"postTemplate": 1,
"id": 0,
"name": "foo"
}
But I need a POST like this:
{
"postTemplate": {
"id": 1,
"blah": "foo"
},
"id": 0,
"name": "bar"
}
Also, the assessor function like "setPostTemplate" doesn't exist and I think it should be created automatically.
Already tried to something like " record.data.postTemplate = (...) " but I got an infinite loop throwing an execption...
Can someone please advise? Also, if you need something else that could be useful for the answer let me know.
Thanks!
Out of the box the Associated objects are not serialized back to the server as you expect them . This issue has been brought up many times. The best thing might be to follow this thread:
http://www.sencha.com/forum/showthread.php?141957-Saving-objects-that-are-linked-hasMany-relation-with-a-single-Store
This thread talks about overriding getRecordData in the JSON writer class.

ExtJS store still filled after browser refresh and restart

I use ExtJs 4.1 and DeftJS. I use a grid with data from a store in a window. The data from the store should be reloaded when opening the window, and when closing it should be cleared.
However if even If I refresh the browser, and also after restarting the browser, the same old data is still in the grid. Hows that possible?
How to clear the store?
My store looks like this:
Ext.define( 'XXX.plugins.monitor.store.GridLogfiles', {
extend : 'Ext.data.Store',
mixins: [
'Deft.mixin.Injectable'
],
destroy: function() {
return this.callParent( arguments );
},
// model: Deft.Injector.resolve('modelGridLogfiles'),
model: 'XXX.plugins.monitor.model.GridLogfiles',
proxy : {
type : 'ajax',
url : 'XXX:8090/devel/phi/dev/04-presentation/von_kay/http-api/HEAD/index.php',
extraParams: {
user : 'test',
pass : 'test',
vers : 'extjs.json',
module : 'monitor',
func : 'getLogfiles'
},
reader : {
type: 'json',
root: 'list',
// root: 'list.getLogFiles',
// root: 'getLogfiles',
successProperty:false
}
}
, autoLoad: true
} );
My model like this:
Ext.define( 'XXX.plugins.monitor.model.GridLogfiles', {
extend: 'Ext.data.Model',
mixins: [
'Deft.mixin.Injectable',
],
destroy: function() {
return this.callParent( arguments );
},
fields: [ {name: 'key'}, {name: 'value'} ]
// fields: [ { name : 'value' } ]
} );
In my window I bind the store with:
,items: [{
xtype: 'grid',
itemId: 'gridlogfiles',
store: Deft.Injector.resolve('storeGridLogfiles'),
...
Problem fixed, was a mistake on root in my store.

EXTJS4--Why don't my associated stores load child data?

So I have a parent and child store, illustrated here:
Parent Model
Ext.define('APP.model.Client', {
extend: 'Ext.data.Model',
requires: [
'APP.model.Website', 'Ext.data.association.HasMany', 'Ext.data.association.BelongsTo'],
fields: [{
name: 'id',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'slug',
type: 'string'
}, {
name: 'active',
type: 'boolean'
}, {
name: 'current',
type: 'boolean'
}],
hasMany: {
model: 'APP.model.Website',
name: 'websites'
}
});
Child Model
Ext.define('APP.model.Website', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'client_id',
type: 'string'
}, {
name: 'sub_domain',
type: 'string'
}, {
name: 'active',
type: 'boolean'
}],
belongsTo: 'APP.model.Client'
});
Using an AJAX call via the server, I am loading the Clients store, and that is loading fine. But the Websites store isn't populated, and when I breakpoint on the Clients store on.load function, to see what it's populated with, the Client store is only populated with the client data, but in the raw property for that store, I can see all the websites data. So it's being returned correctly, but my extjs isn't correct. Here are the stores:
Client Store
Ext.define('APP.store.Clients', {
extend: 'Ext.data.Store',
autoLoad: false,
model: 'APP.model.Client',
proxy: {
type: 'ajax',
url: '/client/list',
reader: {
type: 'json',
root: 'items'
}
},
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
Websites Store
Ext.define('APP.store.Websites', {
extend: 'Ext.data.Store',
requires: ['Ext.ux.Msg'],
autoLoad: false,
model: 'APP.model.Website',
proxy: {
type: 'ajax',
url: '/client/list',
reader: {
type: 'json',
root: 'items'
},
writer: {
type: 'json'
}
},
sorters: [{
property: 'sub_domain',
direction: 'ASC'
}]
});
My final result is...I would like to populate both stores so I can click on an element, and when it loads something from the parent store, I can access the child store(s) (there will be more when I figure out this problem) to populate a couple grid(s) in tabs.
What am I missing as far as my setup? I just downloaded extjs4 a couple days ago, so I am on 4.1.
Put your proxies in your models, unless you have a good reason not to [1]
Make sure you require the related model(s), either in the same file, or earlier in the application
Use foreignKey if you want to load the related data at will (i.e. with a later network request).
Use associationKey if the related data is loaded in the same (nested) response
Or just use both
Always name your relationships (otherwise the name will be weird if using namespaces).
Always use the fully qualified model name for the model property in your relationships
Working code:
model/Contact.js:
Ext.define('Assoc.model.Contact', {
extend:'Ext.data.Model',
requires:[
'Assoc.model.PhoneNumber'
],
fields:[
'name' /* automatically has an 'id' field */
],
hasMany:[
{
model:'Assoc.model.PhoneNumber', /*use the fully-qualified name here*/
name:'phoneNumbers',
foreignKey:'contact_id',
associationKey:'phoneNumbers'
}
],
proxy:{
type:'ajax',
url:'assoc/data/contacts.json',
reader:{
type:'json',
root:'data'
}
}
});
model/PhoneNumber.js:
Ext.define('Assoc.model.PhoneNumber', {
extend:'Ext.data.Model',
fields:[
'number',
'contact_id'
],
proxy:{
type:'ajax',
url:'assoc/data/phone-numbers.json',
reader:{
type:'json',
root:'data'
}
}
});
data/contacts.json:
{
"data":[
{
"id":1,
"name":"neil",
"phoneNumbers":[
{
"id":999,
"contact_id":1,
"number":"9005551234"
}
]
}
]
}
data/phone-numbers.json
{
"data":[
{
"id":7,
"contact_id":1,
"number":"6045551212"
},
{
"id":88,
"contact_id":1,
"number":"8009996541"
},
]
}
app.js:
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
requires:[
'Assoc.model.Contact'
],
name:'Assoc',
appFolder:'Assoc',
launch:function(){
/* load child models that are in the response (uses associationKey): */
Assoc.model.Contact.load(1, {
success: function(record){
console.log(record.phoneNumbers());
}
});
/* load child models at will (uses foreignKey). this overwrites child model that are in the first load response */
Assoc.model.Contact.load(1, {
success: function(record){
record.phoneNumbers().load({
callback:function(){
console.log(arguments);
}
});
}
});
}
});
[1] A store will use its model's proxy. You can always override the store's proxy if need be. You won't be able to use Model.load() if the model has no proxy.
Your assumption is wrong. You expect that the WebSite store loads itself but that is not how it works. What you can do is the following (this is untested but is how I do it in all my projects):
In your clients grid add a listener for the itemclick event to call the following method (showWebSites). It will receive the selected client record containing the selected APP.model.Client instance. Then, and given that each client has a set of WebSites, the method will load the APP.store.Websites store and the client´s websites will be displayed in your view.
showWebSites: function (sender, selectedClient) {
Ext.StoreManager.lookup('APP.store.Websites')
.loadData(selectedClient.data.WebSites);
}
This is the way. I hope you find it useful.

Resources