1. #1
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Default How do you use TreePanel + TreeStore

    How do you use TreePanel + TreeStore


    I have no idea how to use a TreePanel with a TreeStore. The TreeStore has no documentation and the examples are all rather specific.

    I would like to use a tree to represent two levels of my Model. The related Models are below:

    Code:
        Ext.regModel('Codebook', {
            fields: [
                {name: 'id', type: 'int'},
                {name: 'name', type: 'string'},
                {name: 'description', type: 'string'}
            ],
            associations: [
                {type: 'hasMany', model: 'Facet', name: 'facets'}
            ]
        });
        Ext.regModel('Facet', {
            fields: [
                {name: 'id', type: 'int'},
                {name: 'name', type: 'string'},
                {name: 'description', type: 'string'}
            ],
            associations: [
                {type: 'belongsTo', model: 'Codebooks'},
                {type: 'hasMany', model: 'Focus', name: 'foci'}
            ]
        });
    So, as you can see, a Facet belongs to a Codebook. The entire application is RESTful. When you visit the start URL, you get a URL for codebooks (among other things) like so:

    Code:
    {
        codebooks: '/rules/codebooks'
        ....
    }
    Ideally, given the description of my model and the the type of reader to use, Ext 4 should be able to auto configure the URLs for its proxy with a true RESTful application like this, but thats another conversation. When you fetch the codebooks url, you get the following:

    Code:
    {
        codebooks:
            {
                id: 1
                name: 'Football',
                description: 'A codebook about football',
                facets: '/rules/codebooks/1/facets/'
            },
            {
                id: 2
                name: 'Basketball',
                description: 'A codebook about basketball',
                facets: '/rules/codebooks/2/facets/'
            }
    }
    from which it should be possible for Ext to create codebook instances, the top level of my tree. The next level of my tree, the facets, look like this:

    Code:
    {
        facets:
            {
                id: 1
                name: 'How',
                description: 'A facet about how',
                codebook_id: 1
            }
    }
    I have no idea how I am meant to even start with creating a TreePanel for this. I looked at the examples and keep getting an error on line 57401 of ext-all-w-comments.js beta2 saying getRoot doesn't exist. I originally thought it was because I needed to see the root of my JSON reader but that doesn't appear to be the case. My code is below:

    Code:
    Ext.define('Ilib.ui.CodebookTreePanel', {
        extend: 'Ext.tree.TreePanel',
        title: 'Codebooks',
        store: new Ext.data.TreeStore({
            proxy: {
                type: 'rest',
                url: '/rules/codebooks/',
                reader: {
                    type: 'json',
                    root: 'codebooks'
                }
            },
            model: 'Codebook',
            root: {
                expanded: true
            },
            folderSort: true
        }),
        useArrows: true,
        columns: [{
            xtype: 'treecolumn', //this is so we know which column will show the tree
            text: 'Name',
            flex: 1,
            sortable: true,
            dataIndex: 'name'
        },{
            text: 'Description',
            flex: 3,
            sortable: false,
            dataIndex: 'description'
        }]
    });
    Any help appreciated.

  2. #2
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    896
    Vote Rating
    39
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    I believe your TreePanel needs a root node specified in its config.
    Edit: Oh, I see you do have one.... umm, not sure then....


    Some other observations.

    There may be a typo in one of your associations, where the model is specified as 'Codebooks' and not 'Codebook'?

    Also, the JSON you are returning has a single 'facet', where as I'd have thought due to the associations it should be a JSON array.


    I'm just starting to try and get my head around the classes myself; the documentation is very poor at the moment, and like you say, the examples are not terribly useful, being extremely simplistic.

    Still, I'm sure it'll start making sense... well, I hope so.

    Cheers,
    Westy

  3. #3
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Default


    Thanks for pointing out the association error. There is a number of little of things like this that don't cause JavaScript errors that might catch people out. The other I've seen is using the extends config instead of extend when using Ext.create(). Extends is a reserved word but still no error in Chrome. Even more worryingly, the panel still rendered. No idea what was going on there.

    With regards to the JSON I posted, I had to hand type it out because the original version has no white space. The last two snippets of JSON are missing [ & ] but they are in the originals.

    I do hope these classes get some more attention and examples.

    Cheers

  4. #4
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Default


    Quote Originally Posted by rstuart View Post
    Thanks for pointing out the association error. There is a number of little of things like this that don't cause JavaScript errors that might catch people out. The other I've seen is using the extends config instead of extend when using Ext.create(). Extends is a reserved word but still no error in Chrome. Even more worryingly, the panel still rendered. No idea what was going on there.
    An extension to JSlint or something similar would be nice to check for these common pitfalls.

Similar Threads

  1. TreeStore & TreePanel
    By jeusdi in forum Ext: Discussion
    Replies: 1
    Last Post: 8 Apr 2011, 3:59 AM
  2. Replies: 0
    Last Post: 23 Mar 2011, 5:02 AM
  3. [FIXED] TreePanel/TreeStore sort problems
    By James Goddard in forum Ext GWT: Bugs (2.x)
    Replies: 1
    Last Post: 11 Nov 2009, 1:19 PM
  4. Replies: 5
    Last Post: 5 Aug 2009, 5:45 AM
  5. Replies: 0
    Last Post: 21 Jun 2009, 2:48 AM

Thread Participants: 1