PDA

View Full Version : Is it possible to load nested data into associated models using only one proxy?



norbergh
9 Dec 2011, 2:46 AM
I've been trying to create a TreePanel that doesn't need to load every time you click a node, kinda like this example (http://docs.sencha.com/ext-js/4-0/#!/example/tree/treegrid.html) but with different data in the child nodes than in the parent nodes.

My goal is to be able to have two different models for parent/child and my first thought was to load nested data and use associations to fill the child model. However, after slamming my head against the wall for a day it's feeling pretty hopeless. Is this even possible?

If not, is it possible to have two associated models that loads their data individually populate a tree with one model being the parent nodes and one the child nodes? Or maybe even combine two stores into one treestore? Another very ugly soultion is to have one special "treemodel" that has all fields of both models but I really hope it doesn't come to that. What should I do?

Here's a slightly modified version of the example above that tries to use two different models:


Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);


Ext.onReady(function() {
Ext.define('Library', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'float'},
{name: 'name', type: 'string'},
{name: 'adress', type: 'string'}
],
hasMany: { model: 'Book', name: 'books', associationKey: 'books' }
});

Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'float'},
{name: 'library_id', type: 'float'},
{name: 'name', type: 'string'},
{name: 'author', type: 'string'}
],
BelongsTo: 'Library'
});


var store = Ext.create('Ext.data.TreeStore', {
model: 'Library',
proxy: {
type: 'ajax',
//Url returns valid json.
url: 'henrik.html'
},
folderSort: true,
listeners: {
load: {
//Returns undefined
fn: function(store, node, rec) {
console.log(rec[0].books()[0])
}
}
}
});


var tree = Ext.create('Ext.tree.Panel', {
title: 'Libraries',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
displayField: 'name',
listeners: {
itemclick: {
fn: function(view, rec) {
console.log(rec);
}
}
}
});
});


Here's the json that henrik.html returns:


{
"text": ".",
"children": [
{
"id": "1",
"name": "Library 1",
"adress": "Imaginary Road 2",
"expanded": true,
"children": [
{
"id": 3,
"library_id": 1,
"name": "Junglebook",
"author": "Kipling",
"leaf": true
}
]
},
{
"id": "2",
"name": "Library 2",
"adress": "Imaginary Road 6",
"leaf": true
}
]
}


As is, it seems that the book also uses the library model. If i name the children property inside the first library object "books" (the associationKey) instead of "children" nothing works. Grateful for all help I can get at this point.

tvanzoelen
9 Dec 2011, 8:59 AM
My goal is to be able to have two different models for parent/child and my first thought was to load nested data and use associations to fill the child model. However, after slamming my head against the wall for a day it's feeling pretty hopeless. Is this even possible?


I think its not possible. See http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.TreeStore loading nestedData

For so far I know, you can only have one model on the tree.