PDA

View Full Version : How?Ext.tree.Panel from json store using metaData to define field instead of a model.



dominicv
1 Aug 2012, 12:08 PM
Hi,

I previously had this posted to the Ext: Discussion forum but perhaps this is the more appropriate place?

Using Ext JS 4.1 (or 4.1.1), I have a Ext.tree.Panel with an ajax/json store. What I would like to do is to change it so that it doesn't have a model defined, but instead uses metaData in the json from the server. If I look here http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json it provides some details on doing this i.e. defining fields & specifying the root etc. But with the Ext.tree.Panel I cannot get it to work.

When I had a model defined, the following json worked:

[
{
"id":"1","text":"Parent1","cls":"something","iconCls":"somethingelse","expanded":true,
"children":[
{"id":"2-1","text":"Child1-1","cls":"something2","iconCls":"somethingelse2","leaf":true}
,{"id":"2-2","text":"Child1-2","cls":"something2","iconCls":"somethingelse2","leaf":true}
]
},{
"id":"2","text":"Parent2","cls":"something","iconCls":"somethingelse","expanded":false
,"children":[
{"id":"2-1","text":"Child2-1","cls":"something2","iconCls":"somethingelse2","leaf":true}
,{"id":"2-2","text":"Child2-2","cls":"something2","iconCls":"somethingelse2","leaf":true}
]
}
]

The model was defined as:

Ext.define('Test.TestTreeModel', {
extend: 'Ext.data.Model',
fields: ['id', 'text']
});

The root for this in the store was set as:

root: 'children'

Now I have changed the json to:

{
"parentrootnode":[
{
"id":"1","text":"Parent1","cls":"something","iconCls":"somethingelse","expanded":true,
"children":[
{"id":"2-1","text":"Child1-1","cls":"something2","iconCls":"somethingelse2","leaf":true}
,{"id":"2-2","text":"Child1-2","cls":"something2","iconCls":"somethingelse2","leaf":true}
]
},{
"id":"2","text":"Parent2","cls":"something","iconCls":"somethingelse","expanded":false
,"children":[
{"id":"2-1","text":"Child2-1","cls":"something2","iconCls":"somethingelse2","leaf":true}
,{"id":"2-2","text":"Child2-2","cls":"something2","iconCls":"somethingelse2","leaf":true}
]
}
]
,"metaData": {
"root":"parentrootnode"
,"idProperty":"id"
,fields: ["id", "text"]
}
}

I have also tried defining the fields using this json syntax:

"fields": [
{ "name": "id", "type": "text" },
{ "name": "text", "type": "string" }
]

In this configuration instead of seeing the tree structure rendered that I had previously working i.e.

-Parent1
--Child1-1
--Child1-2
-Parent2
--Child2-1
--Child2-2

Now all the tree renders is a flat structure:

-Parent1
-Parent2

and on the left of the nodes is a checkbox.

Additionally, in the json I have tried the metaData with:

root="children" and no record attribute,
root="parentrootnode.children" and no record attribute,
root="parentrootnode.children" and record="children"
These changes resulted in nothing being rendered.


When I specify it as:

root="parentrootnode" and record="children"
it appears the same as just having root="parentrootnode", I am pretty sure the record attribute is being ignored.

My code for the store is:

this.store = Ext.create('Ext.data.TreeStore', { //model: 'Test.TestTreeModel', /* if used, and without metadata in json, tree works.
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: '<<hidden>>',
reader: {
type: 'json'
//, root: 'children'
}
},
listeners: {
single: true
, scope: this
, load: this.onFirstLoad
, metachange: function(obj, meta, eOpts ) {
}
}
});


So after the preamble my question is should this work and if so does anyone have an example of how to use a Ext.tree.Panel generated from a json data source that defines the model via metaData instead of specifying a pre-defined model in the store?

bladesling
21 Jan 2013, 11:28 AM
Did you ever find a solution for this problem?

shkiper
4 Mar 2014, 10:00 AM
I have exactly the same problem. I think it's a bug.

http://www.sencha.com/forum/showthread.php?281993-Extjs-4.2.1-tree-grid-and-metadata