PDA

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



Izhaki
21 Oct 2011, 1:57 AM
Right,

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?

Code:


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() {
this.control({
'todotree': {
itemmove: this.itemMove
}
});
},


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


});

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


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

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

No idea how I overlooked that...

Thanks

Izhaki
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'.