PDA

View Full Version : Extjs Tree not able to load nested object



himanshu24
23 Aug 2012, 11:05 PM
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 :


{"text":"Papa","Zone1s":[{"text":"Beta1","Zone1s":[{"text":"BetaBeta1","Zone1s":[]},{"text":"BetaBeta2","Zone1s":[]}]},{"text":"Beta2","Zone1s":[]}]}
i wrote a Extjs model,store and panel below:

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.:-?

scottmartin
24 Aug 2012, 9:08 PM
The following should work for your JSON file:




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

himanshu24
26 Aug 2012, 2:47 AM
Thanks Scott that worked but icons are not getting displaying..
i am getting following-->>
In Firebug :


<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 "

.x-tree-lines .x-tree-elbow { background-image:
url('../img/default/tree/elbow.gif')
}




Result :


38256

Mine jsp 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>

himanshu24
26 Aug 2012, 2:52 AM
<%@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>

himanshu24
27 Aug 2012, 1:23 AM
Thanks Scott ..!!:D