Cannot get scrollbar into a tree panel

[bimargulies]

I have the following nest of panels:

Panel (vbox)
- Panel (grid)
- Panel (tree)
- Panel (tree)

The tree panels are set up as tree grids. Sometimes, an expanded node overflows vertically. I've tried overflowY: 'auto' and overflowY: 'scroll', and autoScroll: true (all in the tree panels). Nothing results in scrolling

http://jsfiddle.net/bimargulies/yHuz2/13/
(http://jsfiddle.net/bimargulies/yHuz2/13/)
is my example. This is simpler than my original description.

Have I found a bug? Is there some recipe that will fix this?

[evant]

It's impossible to say from what you've posted, we need to see a runnable test case. It's likely a mis-configuration.

[bimargulies]

See http://stackoverflow.com/questions/6745395/scrollbar-in-extjs-tree-panel-does-not-work.

I'll work on working up a testcase.

I'm working with the commercial-licensed version. Can I post a fiddle with that, or do I need to go download a GPL version?

[sword-it]

Hi bimargulies,

Are you tried with autoScroll: true, here is sample example http://jsfiddle.net/nLvsb/
Also read API http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tree.Panel-cfg-autoScroll

[bimargulies]

http://jsfiddle.net/bimargulies/yHuz2/13/

Here's my fiddle. I can't get scrolling into the two tree panels, and a number of other strange things go wrong.

[evant]

Ext.define('WD40.view.legend.Utils', {
singleton: true,

createTreeColumsSpec: function(renderFunction) {
return [{
xtype: 'treecolumn',
flex: 1,
text: 'text',
dataIndex: 'text',
renderer: renderFunction
}];
},
createTools: function(prefix) {
return [{
type: 'plus',
id: prefix + 'plustool',
tooltip: "Show selected document highlights"
}, {
type: 'minus',
id: prefix + 'minustool',
tooltip: "Hide selected document highlights"
}];
}
});

Ext.define('WD40.view.Legend', {
extend: 'Ext.panel.Panel',
alias: 'widget.wd40legend',
requires: ['WD40.view.legend.Utils'],
autoScroll: true,
layout: {type: 'vbox', align: 'stretch'},
items: [
{
xtype: 'treepanel',
title: 'Base Linguistics',
border: 0,
rootVisible: false,
itemId: 'bltree',
id: 'bltree',
useArrows: true,
collapsible: true,
collapseFirst: false,
collapsed: false,
hideHeaders: true,
root: {
text: 'Root',
expanded: true,
children: [{
text: 'hello1',
expanded: true,
children: [
{
text: 'child 1',
leaf: true},
{
text: 'child 2',
leaf: true},
{
text: 'child 3',
leaf: true},
{
text: 'child 4',
leaf: true},
{
text: 'child 5',
leaf: true},
{
text: 'child 6',
leaf: true},
{
text: 'child 7',
leaf: true},
{
text: 'child 8',
leaf: true},
{
text: 'child 9',
leaf: true},
{
text: 'child 10',
leaf: true},
{
text: 'child 11',
leaf: true},
{
text: 'child 12',
leaf: true},
{
text: 'child 13',
leaf: true},
{
text: 'child 14',
leaf: true},
{
text: 'child 15',
leaf: true},
{
text: 'child 16',
leaf: true},
{
text: 'child 17',
leaf: true},
{
text: 'child 18',
leaf: true}
]}]
},
columns: WD40.view.legend.Utils.createTreeColumsSpec(

function(value, metaData, record, row, col, store, gridView) {
return '<span class="treenode">' + value + '</span>';
}),
tools: WD40.view.legend.Utils.createTools('bl')},
{
xtype: 'treepanel',
title: 'Entity Extraction',
border: 0,
rootVisible: false,
itemId: 'netree',
id: 'netree',
useArrows: true,
collapsible: true,
collapseFirst: false,
hideHeaders: true,
root: {
text: 'Root',
expanded: true,
children: [{
text: 'hello1',
expanded: true,
children: [
{
text: 'child 1',
leaf: true},
{
text: 'child 2',
leaf: true},
{
text: 'child 3',
leaf: true},
{
text: 'child 4',
leaf: true},
{
text: 'child 5',
leaf: true},
{
text: 'child 6',
leaf: true},
{
text: 'child 7',
leaf: true},
{
text: 'child 8',
leaf: true},
{
text: 'child 9',
leaf: true},
{
text: 'child 10',
leaf: true},
{
text: 'child 11',
leaf: true},
{
text: 'child 12',
leaf: true},
{
text: 'child 13',
leaf: true},
{
text: 'child 14',
leaf: true},
{
text: 'child 15',
leaf: true},
{
text: 'child 16',
leaf: true},
{
text: 'child 17',
leaf: true},
{
text: 'child 18',
leaf: true}
]}]
},
columns: WD40.view.legend.Utils.createTreeColumsSpec(

function(value, metaData, record, row, col, store, gridView) {
return '<span class="ne-type-node">' + value + '</span>';
}),
tools: WD40.view.legend.Utils.createTools('ne')}]
});





Ext.application({
name: 'WD40',
controllers: [],
launch: function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
title: 'wd40',
layout: 'border',
items: [{
xtype: 'toolbar',
region: 'north',
split: false,
border: false},
{
xtype: 'panel',
region: 'center',
layout: 'border',
border: false,
defaults: {
split: true
},
items: [{
xtype: 'tabpanel',
region: 'center',
height: 250,
id: 'docTabs'}
]},
{
xtype: 'wd40legend',
id: 'legendView',
region: 'west',
split: true,
width: 275}


]
});

}
});​

[bimargulies]

I'm very sorry. I wanted to do scrolling inside each of the tree panels, not for the overall panel containing both.

I've fixed the fiddle to show what I meant to show.

I tried putting the vbox/stretch into the tree panels, but that would be pure cargo-cultism on my part and didn't work in any case.

[bimargulies]

The solution to this is to add some flex: properties to the pieces.

However, a caution to readers: That does not interact well with collapsible.