PDA

View Full Version : Tree behaving strange



MH61
4 Aug 2009, 5:41 AM
I have the following tree:



this.tree = new Ext.tree.TreePanel({
dataUrl: 'Lookup/List',
height: 180,
width: 300,
useArrows: true,
autoScroll: true,
containerScroll: true,
animate: true,
enableDD: false,
animate: true,
rootVisible: false,
root: {
id: '0',
text: 'Root'
},
});Lookup/List returns the following json - there is a lot so i've just given a stripped down version


[{"id":4,"text":"Africa","leaf":false,"checked":null,"children":[{"id":12,"text":"Algeria","leaf":true,"checked":false,"children":null,"iconCls":null},{"id":24,"text":"Angola","leaf":true,"checked":false,"children":null,"iconCls":null},{"id":204,"text":"Benin","leaf":true,"checked":false,"children":null,"iconCls":null},{"id":72,"text":"Botswana","leaf":true,"checked":false,"children":null,"iconCls":null}],"iconCls":null},{"id":3,"text":"Asia","leaf":false,"checked":null,"children":[{"id":4,"text":"Afghanistan","leaf":true,"checked":false,"children":null,"iconCls":null},{"id":31,"text":"Azerbaijan","leaf":true,"checked":false,"children":null,"iconCls":null},{"id":48,"text":"Bahrain","leaf":true,"checked":false,"children":null,"iconCls":null},{"id":50,"text":"Bangladesh","leaf":true,"checked":false,"children":null,"iconCls":null},{"id":64,"text":"Bhutan","leaf":true,"checked":false,"children":null,"iconCls":null}],"iconCls":null}]What is strange about this:
-it takes a long time to open each branch, which i'm confused about since the data pre-loads instead of being loaded on branch click
-if i open any branch that has enough leaves that the panel becomes scrollable, if i scroll down to the very last branch and click the arrow, it does bit open - instead it highlights the second last branch and scorlls up so the second last branch is displayed at the bottom of the panel, and i must scroll down again to see the last branch which has not expanded. however if i double click the icon the branch will expand.
-i actually would like to remove the folder/node icon by setting the iconCls to nul;l, but this has no effect.
-whenever i expaand any node the panel becomes sideways scrollable even though there is nothing that goes beyond even the midway point of the panel.

any suggestions? thanks

Animal
4 Aug 2009, 5:49 AM
Lookup/list always returns the same huge load of JSON???????

The whole point of loading from a URL is it gets passed the ID of the node being expanded, and just returns the immediate children of that node!

MH61
4 Aug 2009, 5:58 AM
yes - it always returns a huge batch of Json - but thats because i was under the impression that is how it is supposed to work. When i debug Lookup/List only seems to get called once - on pageLoad, not on branch expand. Have i done something wrong for it to behave in this manner? I don't actually understand where it is being told to load - i see that there is a url, but i would imagine it would be like a grid where i specify auto load, or just call the load function myself, whereas in this tree the call to load seems invisible to me

Animal
4 Aug 2009, 6:17 AM
If you generate the JSON for the whole tree in one shot, then just preload the tree with it as hardcoded data.

Otherwise change your script to only return what is asked for.

MH61
4 Aug 2009, 6:23 AM
I'd prefer to generate the Json for the whole tree in one shot.... but i'm confused what you mean saying i should hardcode the data - I'm pulling the data from a database, are you saying that if this is the case and i must only do the single node loading alternative? or can i just populate a dataset first and then bind to the tree?

Animal
4 Aug 2009, 6:53 AM
Just write the data out into the page:



<script type="text/javascript">
var treeJson = <%treeJson%>;
</script>


The data is there as a var to be used.

MH61
4 Aug 2009, 7:02 AM
I'm confused - pull the Json into a var... but then how does the json get pushed into the tree, unless i'm supposed to do dataUrl: var

MH61
4 Aug 2009, 7:18 AM
i've definitely misunderstood as this causes a 'cannot resolve controller' error

MH61
4 Aug 2009, 8:04 AM
i now have:



var treeJson = new Ext.data.JsonStore({
// Populate Store from controller
autoDestroy: true,
storeId : 'studiesListStore',
url : ROOT + 'Lookup/List',
root : 'Results',
idProperty: 'id',
autoLoad: true,
fields : ['id','text','leaf','@checked','@iconCls']
});

this.tree = new Ext.tree.TreePanel({
//dataUrl: treeJson,
height: 180,
width: 300,
useArrows: true,
autoScroll: true,
containerScroll: true,
animate: true,
enableDD: false,
animate: true,
rootVisible: false,
root: {
id: '0',
text: 'Root'
}//,
});


but now i need to bind the ds to the tree. how do i do this? is this doing what you suggested or have i misunderstood?

MH61
4 Aug 2009, 11:26 AM
just bumping this thread hoping someone can help, I've looked through countless examples and cannot get my tree to work.

MH61
5 Aug 2009, 6:33 AM
I'm still using the original idea of loading from json using the dataurl, since i still am not sure what Animal was suggesting i do, but as for the issues i was having:



-if i open any branch that has enough leaves that the panel becomes scrollable, if i scroll down to the very last branch and click the arrow, it does bit open - instead it highlights the second last branch and scorlls up so the second last branch is displayed at the bottom of the panel, and i must scroll down again to see the last branch which has not expanded. however if i double click the icon the branch will expand.


If i put this into my viewport it seems to work ok, but i'm using it in the ux.Wiz component, so I'm not sure why it would cause this issue. but i feel its because its a fairly small panel and the auto scroll shows the horizontal scroll bar over the last item in the list, so i think it could be confusing my click on the tree item with me trying to scroll horizontally. So ideally i'd just remove the horizontal scroll. but how do i achieve this?



-i actually would like to remove the folder/node icon by setting the iconCls to null, but this has no effect.


Still not sure how to do this. tried setting cls and iconCls to null, but neither produce any result

Animal
5 Aug 2009, 6:37 AM
Use CSS to hide it. It's got a class, "x-tree-node-icon"

MH61
5 Aug 2009, 7:03 AM
thanks very much.. this led me to find x-tree-noicon in the css, so then all i had to do is edit the json and add the each node: cls = "x-tree-noicon"


now all i need to do is solve this scrollbar/non expanding bottom node and I'll be all set

MH61
5 Aug 2009, 7:25 AM
I'll try to show this final problem. the code is as follows:



var tree = new Ext.tree.TreePanel({
height: 100,
width: 200,
useArrows:true,
autoScroll:true,
animate:false,
//containerScroll: true,
rootVisible: false,
root: {
id: '0',
text: 'Root',
nodeType: 'async'
},
// auto create TreeLoader
dataUrl: 'Lookup/List'
});
the attached picture shows the flow of clicks


Edit: The image didn't turn out the way i intended because the text can't be read, but essentially i'm trying to show that the last item disappears behind the scroll bar when clicked, then the H scroll bar will disappear after scrolling down

Animal
5 Aug 2009, 7:40 AM
Something funny here.

You're using a UX? Does it size the gridPanel? How is the TreePanel rendered and sized? By a Container's layout?

Are those scrollbars on the TreePanel's body, or on the containing element of the TreePanel?

MH61
5 Aug 2009, 8:14 AM
Hope this covers it:

STUDIES.Study.StudyInfo4 = Ext.extend(Ext.ux.Wiz.Card, {
StudyRecord : null,
isReadOnly: null,

initComponent : function() {

var tree = new Ext.tree.TreePanel({
height: 100,
width: 200,
useArrows:true,
autoScroll:true,
animate:false,
//containerScroll: true,
rootVisible: false,
root: {
id: '0',
text: 'Root',
nodeType: 'async'
},
// auto create TreeLoader
dataUrl: 'Lookup/List'
});

Ext.apply(this,
{
title : 'Study Information Part 4',
monitorValid : true,
defaults : {
labelStyle : 'font-size:11px',
anchor : '100%',
validationDelay : VALIDATION_DELAY,
disabled: this.isReadOnly
},
labelAlign : 'top',
items : [
{
border : false,
bodyStyle : 'background:none;padding-bottom:10px;',
html : 'Study Info',
disabled: false
},
tree
]
});
this.on('activate', function() {
//Populate the form if it an edit
//Do not reload the values if they could have been changed in any way
if (this.wizard.lastAction == 'previous')
return;

if (!this.wizard.isNew) {
var form = this.getForm();
if (form.isDirty())
return;
//Populate form with existing data
form.loadRecord(this.StudyRecord);
}
}, this);

STUDIES.Study.StudyInfo4.superclass.initComponent.apply(this, arguments);
}
});

I imagine it is the ux that is causing this problem, but i am setting the size of the tree panel myself, and these values can be seen in firebug. Not sure about the scrollbars, i can't find anything about them in firebug, though i know if i don't set autoscroll to true on the treepanel they do not appear, so i'd assume that makes it an element of the treepanel's body, but i wouldn't be surprised if i'm missing the point.

is there anything i can paste from firebug that would be helpful?

MH61
10 Aug 2009, 9:18 AM
I didn't end up solving this issue. Dues to time constraints I had to revert back to 2.2 and just use an item selector.

I'd like to know if anyone else experiences this issue