Results 1 to 6 of 6

Thread: Unable to display root nodes in a tree panel using TreeStore

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    13
    Vote Rating
    0
      0  

    Default Unable to display root nodes in a tree panel using TreeStore

    Hi i'm New to Extjs

    My requirement is to display categories(node) in a tree panel using Tree store

    Here is my Json object


    {"Category":[{"createdBy":"Sairam","createdOn":"1989-10-10T00:00:00+05:30","id":1,"name":"Sairam","parentId":0,"updatedBy":"Sairam","updatedOn":"1989-10-10T00:00:00+05:30"},{"createdBy":"Sri222","createdOn":"2012-10-22T00:00:00+05:30","id":2,"name":"Soft222","parentId":0,"updatedBy":"Durga111","updatedOn":"2012-10-22T00:00:00+05:30"},{"createdBy":"Sri","createdOn":"2012-10-23T00:00:00+05:30","id":4,"name":"Sri","parentId":0,"updatedBy":"Ram","updatedOn":"2012-10-23T00:00:00+05:30"},{"createdBy":"Sri","createdOn":"2012-10-23T00:00:00+05:30","id":5,"name":"Sri","parentId":0,"updatedBy":"Durga","updatedOn":"2012-10-23T00:00:00+05:30"},{"createdBy":"Sri","createdOn":"2012-10-23T00:00:00+05:30","id":6,"name":"Soft","parentId":0,"updatedBy":"Durga","updatedOn":"2012-10-23T00:00:00+05:30"}]}

    My model

    Code:
      
    
    Ext.define('mailtrack.model.Category', {
        extend: 'Ext.data.Model',
        fields: [
          {name:'name',type:'string'},
        ]
    });
    My Store

    Code:
           Ext.define('mailtrack.store.Categories', {
        extend: 'Ext.data.TreeStore',
        model: 'mailtrack.model.Category',
        autoLoad: true,
        storeId: 'categoriesStoreId',
        root: {
            expanded: true,
        },
        proxy:{ 
                type: 'rest',
                url:serviceUrl+'admin-service/categories',
                reader: {
                    type: 'json',
                    root: 'Category'            },
                afterRequest:function( request, success )
                {
                    console.log( 'request here' + request );
                    console.log( 'success result here'  + success );
                }        
        }
    });

    My View

    Code:
          Ext.create('Ext.tree.Panel', {
         title: 'Simple Tree',     width: 200,
         height: 250,
         store: Ext.state.Manager.get('categories'),     dataIndex: 'name'
       }),

    I can't get the Excepted result. My result is to display categories in a tree panel . Only root nodes are present and in that structure there are no child nodes. I got the result that only small folder images are displayed but the category names are not displayed right to the folder images. I tried but i can't find where the error. please tell me where i make the mistake.


    Thanks
    Vijay Bhaskar

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Location
    Krakw
    Posts
    8
    Vote Rating
    1
      1  

    Default

    Index of field in array with children must be call as "children"

    Code:
    Root ---
                 [id]
                 [text]
                 [children]-----
                                       [id]
                                       [text]
                                       [children]

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    1. What does Ext.state.Manager.get('categories') return?
    2. Your tree is configured with rootVisible: true (default setting), so you should set a label for root node.
    Code:
    Ext.define('mailtrack.store.Categories', {
        extend: 'Ext.data.TreeStore',
        model: 'mailtrack.model.Category',
        autoLoad: true,
        storeId: 'categoriesStoreId',
        root: {
            expanded: true,
            name: 'Root'
        },
        ...
    });
    3. You should config a tree column for your tree panel.
    Code:
    Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',     
        width: 200,
        height: 250,
        store: Ext.state.Manager.get('categories'),
        columns: [{
            xtype: 'treecolumn',
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        }],
        //dataIndex: 'name' <- tree panel does not have a config named 'dataIndex'
    });
    BTW, try to avoid trailing commas. They can cause problem, especially if you run your code with IE.

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    13
    Vote Rating
    0
      0  

    Default Unable to display root nodes in a tree panel using TreeStore

    Thanks vietits and PavlaQ for your response

    I tried
    vietits but i got the same result

    Ext.state.Manager.get('categories') -> return category store object


    Here is my result

    TreePanel.png


    My Store is

    Code:
    Ext.define('mailtrack.store.Categories', {
        extend: 'Ext.data.TreeStore',
        model: 'mailtrack.model.Category',
        autoLoad: true,
        storeId: 'categoriesStoreId',
        root: {
            expanded: true,
            name: 'Root'
        },
    
    
        proxy:{ 
                type: 'rest',
                url:serviceUrl+'admin-service/categories',
                reader: {
                    type: 'json',
                    root: 'Category'
                },
                afterRequest:function( request, success )
                {
                    console.log( 'request here' + request );
                    console.log( 'success result here'  + success );
                }
                
        
        }
        
    });
    My View

    Code:
     Ext.create('Ext.tree.Panel', {    title: 'Simple Tree',
        width: 200,
        height: 250,
        store: Ext.state.Manager.get('categories'),
        columns: [{
        xtype: 'treecolumn',
        text: 'Name',
        dataIndex: 'name',
        flex: 1
        }]
     }),
    Please help me

    Thanks
    Vijay Bhaskar

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    Basing on your code, I have tried to create a test case below and it works fine with Ext 4.1.1 and Chrome.
    Code:
    Ext.onReady(function(){
        Ext.define('mailtrack.model.Category', {
            extend: 'Ext.data.Model',
            fields: [
              {name:'name',type:'string'}
            ]
        });
            
        Ext.define('mailtrack.store.Categories', {
            extend: 'Ext.data.TreeStore',
            model: 'mailtrack.model.Category',
            autoLoad: true,
            storeId: 'categoriesStoreId',
            root: {
                expanded: true,
                name: 'Root'
            },
            proxy:{ 
                type: 'ajax', //'rest',
                url: 'index.json', //serviceUrl+'admin-service/categories',
                reader: {
                    type: 'json',
                    root: 'Category'            
                },
                afterRequest:function( request, success )
                {
                    console.log( 'request here' + request );
                    console.log( 'success result here'  + success );
                }        
            }
        });
    
    
        Ext.create('Ext.tree.Panel', {
            renderTo: Ext.getBody(),
            title: 'Simple Tree',     
            width: 200,
            height: 250,
            store: Ext.create('mailtrack.store.Categories'), //Ext.state.Manager.get('categories'),
            columns: [{
                text: 'Name',
                xtype: 'treecolumn',
                dataIndex: 'name',
                flex: 1
            }],
            //dataIndex: 'name'
        });
    });
    index.json
    Code:
    {
        "Category":[{
            "createdBy":"Sairam",
            "createdOn":"1989-10-10T00:00:00+05:30",
            "id":1,
            "name":"Sairam",
            "parentId":0,
            "updatedBy":"Sairam",
            "updatedOn":"1989-10-10T00:00:00+05:30"
        },{
            "createdBy":"Sri222",
            "createdOn":"2012-10-22T00:00:00+05:30",
            "id":2,
            "name":"Soft222",
            "parentId":0,
            "updatedBy":"Durga111",
            "updatedOn":"2012-10-22T00:00:00+05:30"
        },{
            "createdBy":"Sri",
            "createdOn":"2012-10-23T00:00:00+05:30",
            "id":4,
            "name":"Sri",
            "parentId":0,
            "updatedBy":"Ram",
            "updatedOn":"2012-10-23T00:00:00+05:30"
        },{
            "createdBy":"Sri",
            "createdOn":"2012-10-23T00:00:00+05:30",
            "id":5,
            "name":"Sri",
            "parentId":0,
            "updatedBy":"Durga",
            "updatedOn":"2012-10-23T00:00:00+05:30"
        },{
            "createdBy":"Sri",
            "createdOn":"2012-10-23T00:00:00+05:30",
            "id":6,
            "name":"Soft",
            "parentId":0,
            "updatedBy":"Durga",
            "updatedOn":"2012-10-23T00:00:00+05:30"
        }]
    }

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    13
    Vote Rating
    0
      0  

    Default ya its working

    Thanks vietits its working for me also.

    But when i include it in my project it is not working i think i made a mistake in my java services. Thanks once again for you replay






Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •