PDA

View Full Version : Unable to display root nodes in a tree panel using TreeStore



VijayBhaskar
29 Oct 2012, 11:26 AM
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




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

My Store



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



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

PavlaQ
29 Oct 2012, 3:43 PM
Index of field in array with children must be call as "children"


Root ---
[id]
[text]
[children]-----
[id]
[text]
[children]

vietits
29 Oct 2012, 5:24 PM
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.


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.


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.

VijayBhaskar
29 Oct 2012, 9:40 PM
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

39668


My Store is



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



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

vietits
29 Oct 2012, 10:06 PM
Basing on your code, I have tried to create a test case below and it works fine with Ext 4.1.1 and Chrome.


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


{
"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"
}]
}

VijayBhaskar
31 Oct 2012, 4:00 AM
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:)