PDA

View Full Version : Simple queries regarding Tree



Dev One
30 Sep 2011, 12:54 AM
Hi all,

I just had a couple of queries in regards to Ext JS Tree.

Firstly, how I can set a tree panel's panel's height to automatically inherit the height of a div it is contained in? I have a div set with a min-height but I'm not sure how to implement the auto fill of height.

Secondly, how can I include a horizontal scroll within a tree? The tree has a width of 300 but most of the data isn't shown properly as it isn't wide enough.

FYI, I am using Ext JS 4.0.2a.

Thanks,
Dev One

Dev One
30 Sep 2011, 11:46 PM
Anybody?

malcolm
2 Oct 2011, 1:07 AM
Hi,

In your Ext.tree.Panel properties try:-

height:"100%",
width:"100%",
autoScroll: true,

Dev One
2 Oct 2011, 3:42 AM
Thanks for the reply, that unfortunately, doesn't work. Here's my code:



Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);

Ext.onReady(function() {

var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'get-nodes.php'
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});

var store1 = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'get-nodes2.php'
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});

var tree = Ext.create('Ext.tree.Panel', {
title: 'Team Projects',
width: "100%",
layout: 'fit',
height: 300,
renderTo: 'tree-example',
collapsible: true,
autoScroll: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true
});

var tree1 = Ext.create('Ext.tree.Panel', {
title: 'Individual Projects',
width: '100%',
height: 300,
renderTo: 'tree-example',
collapsible: true,
autoScroll: true,
horizontalScroll: true,
useArrows: true,
rootVisible: false,
store: store1,
multiSelect: true,
singleExpand: true
});

tree1.collapse();

});


This is what my div is set as:



<div id="tree-example" style="min-height: 500px; width: 203px;"></div>