Results 1 to 5 of 5

Thread: Extjs Tree not able to load nested object

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: Extjs Tree not able to load nested object

    I have a class called Zone1s in java which has 2 fields text(name of zone) and list of Zone1s. when i convert it to json i get following response :

    Code:
    {"text":"Papa","Zone1s":[{"text":"Beta1","Zone1s":[{"text":"BetaBeta1","Zone1s":[]},{"text":"BetaBeta2","Zone1s":[]}]},{"text":"Beta2","Zone1s":[]}]}
    i wrote a Extjs model,store and panel below:
    Code:
    Ext.define('Zone1s', {
        extend: 'Ext.data.Model',
        fields: [
    
            { name: 'text', type: 'string' } 
        ], 
    
        proxy: {                       
            type: 'ajax',
            url : 'test.htm',
            reader: {
        type  : 'json',
          record: 'Zone1s'
            }
        },
    hasMany: {model: 'Zone1s', name: 'Zone1s'},
    belongsTo: 'Zone1s'
    });
    
    var store =Ext.create('Ext.data.Store', {
        model: 'Zone1s',
        autoLoad: true
    });
    
    Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        width: 200,
        height: 150,
        store: store,
    
        renderTo: Ext.getBody()
    });
    i am getting following error: me.store.getRootNode is not a function... Can anyone please Guide me where i am wrong ? i have gone through posts with same error but here i did not write a controller and my Zone1s can have Zone1s in themselves that's the difference.

  2. The following should work for your JSON file:

    Code:
    Ext.onReady(function(){
    
        Ext.define('Zone1s', {
            extend: 'Ext.data.Model',
            fields: [
            {
                name: 'text',
                type: 'string'
            }],
    
            proxy: {
                type: 'ajax',
                url: 'data.json',
                reader: {
                    type: 'json',
                    root: 'Zone1s'
                }
            },
            hasMany: {
                model: 'Zone1s',
                name: 'Zone1s'
            },
            belongsTo: 'Zone1s'
        });
    
        var store = Ext.create('Ext.data.TreeStore', {
            model: 'Zone1s',
            autoLoad: true,
            root: {
                expanded: true,
            }
    
        });
    
        Ext.create('Ext.tree.Panel', {
            title: 'Simple Tree',
            width: 200,
            height: 150,
            store: store,
            renderTo: Ext.getBody()
        });
    
    });
    Scott

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    The following should work for your JSON file:

    Code:
    Ext.onReady(function(){
    
        Ext.define('Zone1s', {
            extend: 'Ext.data.Model',
            fields: [
            {
                name: 'text',
                type: 'string'
            }],
    
            proxy: {
                type: 'ajax',
                url: 'data.json',
                reader: {
                    type: 'json',
                    root: 'Zone1s'
                }
            },
            hasMany: {
                model: 'Zone1s',
                name: 'Zone1s'
            },
            belongsTo: 'Zone1s'
        });
    
        var store = Ext.create('Ext.data.TreeStore', {
            model: 'Zone1s',
            autoLoad: true,
            root: {
                expanded: true,
            }
    
        });
    
        Ext.create('Ext.tree.Panel', {
            title: 'Simple Tree',
            width: 200,
            height: 150,
            store: store,
            renderTo: Ext.getBody()
        });
    
    });
    Scott

  4. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks Scott that worked but icons are not getting displaying..
    i am getting following-->>
    In Firebug :

    Code:
    <img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
    Folder structure : J2ee web project
    so under WebContent i have folders img, css, js etc
    i modified url path in "ext-all.css "
    Code:
    .x-tree-lines .x-tree-elbow {    background-image:
            url('../img/default/tree/elbow.gif')
    }


    Result :


    result.jpg

    Mine jsp code :

    Code:
    <%@taglib uri="http://www.springframework.org/tags" prefix="spring"%><%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
    <html><head>
    
    
    <link rel="stylesheet" type="stylesheet" href="css/ext-all.css">
    <script type="text/javascript" src="js/ext-all-debug.js"></script>    
        
    <script type="text/javascript">
    Ext.onReady(function(){
    
    
        Ext.define('Zone1s', {
            extend: 'Ext.data.Model',
            fields: [
            {
                name: 'text',
                type: 'string'
            }],
    
    
            proxy: {
                type: 'ajax',
                url: 'test.htm',
                reader: {
                    type: 'json',
                    root: 'Zone1s'
                }
            },
            hasMany: {
                model: 'Zone1s',
                name: 'Zone1s'
            },
            belongsTo: 'Zone1s'
        });
    
    
        var store = Ext.create('Ext.data.TreeStore', {
            model: 'Zone1s',
            autoLoad: true,
            root: {
                expanded: true,
            }
    
    
        });
    
    
        Ext.create('Ext.tree.Panel', {
            title: 'Simple Tree',
            width: 200,
            height: 250,
            store: store,
            renderTo: Ext.getBody()
        });
    
    
    });
    </script>
    
    
    </head>
     
    <body>
    
    
    </body>
        </html>

  5. #4
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default My Jsp code

    Code:
    <%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
    <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
    <html><head>
    
    
    <link rel="stylesheet" type="stylesheet" href="css/ext-all.css">
    <script type="text/javascript" src="js/ext-all-debug.js"></script>    
        
    <script type="text/javascript">
    Ext.onReady(function(){
    
    
        Ext.define('Zone1s', {
            extend: 'Ext.data.Model',
            fields: [
            {
                name: 'text',
                type: 'string'
            }],
    
    
            proxy: {
                type: 'ajax',
                url: 'test.htm',
                reader: {
                    type: 'json',
                    root: 'Zone1s'
                }
            },
            hasMany: {
                model: 'Zone1s',
                name: 'Zone1s'
            },
            belongsTo: 'Zone1s'
        });
    
    
        var store = Ext.create('Ext.data.TreeStore', {
            model: 'Zone1s',
            autoLoad: true,
            root: {
                expanded: true,
            }
    
    
        });
    
    
        Ext.create('Ext.tree.Panel', {
            title: 'Simple Tree',
            width: 200,
            height: 250,
            store: store,
            renderTo: Ext.getBody()
        });
    
    
    });
    </script>
    
    
    </head>
     
    <body>
    
    
    </body>
        </html>

  6. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks Scott ..!!

Tags for this Thread

Posting Permissions

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