How to expand tree node without ajax request? - extjs4

Question

I am using Extjs tree, i got problem with click on nested node ajax request to server, i know this kind of lazy load but my tree is not big, around 35 items so i want request to server time only to collect all tree node and items.
Any idea?
View:
Ext.define('CRM.view.role.RoleTree' ,{
extend: 'Ext.tree.Panel',
alias: 'widget.roleTreeList',
id:'tree-role-panel',
split: false,
autoScroll: true,
lines: true,
singleExpand: false,
store: 'RoleList'
})
Store:
Ext.define('CRM.store.RoleList', {
extend: 'Ext.data.TreeStore',
storeId: 'RoleTreeStoreId',
//model: 'CRM.model.RoleList',
autoLoad: false,
proxy: {
type : 'ajax',
url : 'index.php/role/getRoleList',
async : false,
reader: {
type : 'json',
method : 'POST'
}
},
root:{
expanded:true,
text:"Organization",
leaf:'false',
id : '/',
}
})
Json return:
{
"text": "Organization",
"id": "role-1",
"children": [
{
"text": "Admin",
"id": "role-12",
"expanded": "true",
"children": [
{
"text": "MSD",
"id": "role-23",
"children": [
{
"text": "Customer Care Manager",
"id": "role-4",
"children": [
{
"text": "Customer Care Adviser",
"id": "role-5"
}
]
},
{
"text": "Solution Adviser",
"id": "role-7"
},
{
"text": "Sales Manager",
"id": "role-31",
"children": [
{
"text": "Solution Sales",
"id": "role-6"
},
{
"text": "Teritory 01 - Safy",
"id": "role-9",
"children": [
{
"text": "Sales Person 01",
"id": "role-10"
},
{
"text": "Sales Trainee 01",
"id": "role-26"
}
]
},
{
"text": "Teritory 3 - Sambo",
"id": "role-11",
"children": [
{
"text": "Sales Person 3",
"id": "role-13"
}
]
},
{
"text": "Teritory 4 - Narong",
"id": "role-14",
"children": [
{
"text": "Sales Team 4",
"id": "role-15",
"children": [
{
"text": "Sales Person 4",
"id": "role-25"
}
]
}
]
},
{
"text": "branch shv",
"id": "role-16",
"children": [
{
"text": "sales shv",
"id": "role-19"
}
]
},
{
"text": "branch btb",
"id": "role-17",
"children": [
{
"text": "sales btb",
"id": "role-20"
}
]
},
{
"text": "branch srp",
"id": "role-18",
"children": [
{
"text": "sales srp",
"id": "role-21",
"children": [
{
"text": "sales person srp",
"id": "role-28"
}
]
}
]
},
{
"text": "Retention Program",
"id": "role-22",
"children": [
{
"text": "Retention Program Analysist",
"id": "role-24"
}
]
},
{
"text": "Sales Trainee",
"id": "role-27"
},
{
"text": "Enterprise Sales Engineer",
"id": "role-29"
},
{
"text": "Meas Test",
"id": "role-30"
},
{
"text": "Teritory 02 - Kol",
"id": "role-32",
"children": [
{
"text": "Sales Person 02",
"id": "role-8"
}
]
}
]
}
]
},
{
"text": "CTO",
"id": "role-35",
"children": [
{
"text": "Support Manager",
"id": "role-2",
"children": [
{
"text": "Technical Support Adviser",
"id": "role-3"
}
]
},
{
"text": "IT BIlling Product Manager",
"id": "role-33",
"children": [
{
"text": "IT Staff",
"id": "role-34"
}
]
}
]
},
{
"text": "Business Consultant",
"id": "role-36"
}
]
}
]
}

Answer 1

You can still use asynchronous call, but only once. To make sure only one call is made, return all children in first call. Extjs will load all children provided.

Answer 2

I found my mistake with JSON, i should add property "leaf = true/false" according has child or hasn't.