View Full Version : preloadChildren (Tree) equivalent in Ext JS 4?

21 Oct 2011, 1:57 AM

I'm testing Ext JS 4, trying to build a simple tree + direct app using MVC.

I can't, for the life of me, work out the equivalent of preloadChildren that exists in Ext JS 3. I'm sure I'm overlooking something very basic, but 4 hours of research and still no idea.

Can anyone help?


Ext.define('TODO.store.Todos', {
extend: 'Ext.data.TreeStore',
proxy: {
// TODO: Fix type to 'direct', directFn out of quotes, remove ext-hacks related code
type: 'direct2',
directFn: "Todos.getTree",
paramOrder: ['node']
root: {
text: 'Ext JS',
id: 'root',
expanded: true
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'

Ext.define('TODO.view.user.TodoTree' ,{
extend: 'Ext.tree.Panel',
alias : 'widget.todotree',

title : 'Todos',
store : 'Todos',

rootVisible: false,

viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'

Ext.define('TODO.controller.TodoTree', {
extend: 'Ext.app.Controller',

views: ['user.TodoTree'],
stores: ['Todos'],

init: function() {
'todotree': {
itemmove: this.itemMove

itemMove: function(node, oldParent, newParent, index, options) {
console.log(node.data.text + ' Moved');


21 Oct 2011, 1:54 PM
Could you not just return the nested children in your response?

"text": "Node",
"children": [{
"text": "Child"

22 Oct 2011, 4:42 AM
That seems to work.

No idea how I overlooked that...


22 Feb 2012, 8:51 AM
In reply to my own post, I hope these will help others who might bump into this thread.

With 4.1.0b2, I'm was trying to load a nested json from the server. I'm not showing my root (rootVisible: false) and the server doesn't return it either. It works, but you get 3 server calls.

To load it all at once, it turns out the reader's root is also the one used for the children property. So the proxy will be defined like this:

proxy: {
type: 'direct',

api: {
create: Groups.Create,
read: Groups.GetTree,
update: Groups.Update,
destroy: Groups.Delete,

reader: {
type: 'json',
root: 'children'

extraParams: {
showExpired: false


The json returned from the server will be:

{success:true, children:[,]}

The within the json node children also have to have 'children'.