PDA

View Full Version : [Solved] Tree and loading multiple times in a row in AJAX to go desired child node



olivierpons
10 Jan 2010, 12:51 AM
Maybe the title isn't very self explanatory.

I would like to do something very close to the Ext 3.1 documentation (http://www.extjs.com/forum/../deploy/dev/docs/?class=Ext.chart.StackedBarChart).

The first thing is a tree on the left
The second is, when you click it opens a tab with the URL you've clicked that will be dowloaded.

The only big difference with the Ext 3.1 documentation (http://www.extjs.com/forum/../deploy/dev/docs/?class=Ext.chart.StackedBarChart) is the way it's loaded when you give a "class" to see.
I want the tree not to load the whole datas at once (like the Ext 3.1 documentation (http://www.extjs.com/forum/../deploy/dev/docs/?class=Ext.chart.StackedBarChart) does).

Just click here (http://labyz.fr/_admin/laby_edit.php) you'll see how many records it has : 90000, so I can't send the whole tree datas at once.

The problem I'm facing is that I'd like to go straight to a defined node. Like the documentation does. For example, if you give it

?class=Ext.chart.StackedBarChartit goes to this class : click here to see (http://www.extjs.com/forum/../deploy/dev/docs/?class=Ext.chart.StackedBarChart).
What it does is that it splits the param into pieces that are nodes :
node "Ext"
then child node "chart"
then child node "StackedBarChart"

I would like to do the same like that : you give it

?obj=2006-02-02-01-01-28and it goes to
node "2006"
then child node "2006-02"
then child node "2006-02-02"
then child node "2006-02-02 01:01:28"

If there's no param, just show the tree like it does here (http://www.extjs.com/forum/../deploy/dev/docs/?class=Ext.chart.StackedBarChart). If there's a param, show a "loading" page, and go to the desired node (if it exists).
Here's the problem I'm facing :
I have to download each node and expand it to launch the AJAX download event, then each "child node" and expand it in AJAX as long as I've not reached the desired node. Once I've reached the node, open the tab and show everything.

How would you do, where should I look, maybe... what would you do if you'd have to do that ?

Don't hesitate to edit/correct my post to correct my English :D

olivierpons
10 Jan 2010, 1:31 AM
Here's what I've found so far if I add those listeners :


listeners: {
click: function(n) {
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
Ext.Msg.alert('Click', 'Clicked on : "' + n.attributes.text + '"');
//Ext.getCmp('panel-edit').load(n.attributes.url);
}
},
beforechildrenrendered: function(n) {
console.log('beforechildrenrendered : ' + n.id);
if (n.childNodes) {
for (var i=0; i<n.childNodes.length; i++) {
console.log(n.childNodes[i].id);
if ((n.childNodes[i].id=='labys/2007') ||
(n.childNodes[i].id=='labys/2007/08') ||
(n.childNodes[i].id=='labys/2007/08/29')) {

n.childNodes[i].expand(false,false);
}
}
}
}
It works. But I don't know if it is the right listener to use. Moreover if I want a specific node to be selected like this (in red) there's a JavaScript exception, so this may not be the right place to do it :


listeners: {
beforechildrenrendered: function(n) {
console.log('beforechildrenrendered : ' + n.id);
if (n.childNodes) {
for (var i=0; i<n.childNodes.length; i++) {
console.log(n.childNodes[i].id);
if ((n.childNodes[i].id=='labys/2007') ||
(n.childNodes[i].id=='labys/2007/08') ||
(n.childNodes[i].id=='labys/2007/08/29')) {

n.childNodes[i].expand(false,false);
}
if (n.childNodes[i].id=='labys/2007/08/29/21_14_04') {
n.childNodes[i].select();
}
}
}
}

olivierpons
10 Jan 2010, 3:05 PM
I answer myself (maybe this could help someone) :
Here's my first attempt that works: create a TreeLoader and put this code:


var LysTreeLoader = new Ext.tree.TreeLoader({
dataUrl: 'json/lys.php',
listeners: {
load: function(loader,n,response) {
console.log('datas loaded');
n.eachChild(
function(n) {
if ((n.id=='lys/2007') ||
(n.id=='lys/2007/08') ||
(n.id=='lys/2007/08/29')) {
n.expand(false,false);
}
if (n.id=='lys/2007/08/29/21_14_04') {
n.select();
console.log(n.id);
console.log(n.getPath());
}
});
}
}
});