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

[dominicv]

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/#!...ta.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]

Did you ever find a solution for this problem?